목록2022/12/23 (1)

Bleeding edge

2022/12/22 - React scroll animation

Why? 리액트에서 페이지 이동을 할 때 페이지가 이전 페이지의 위치가 유지되는 현상이 있었다. SPA에서 다른 페이지로 이동할 때 자연스러운 느낌이 들지 않아서 페이지를 위로 올려주는 방법이 필요했다. 해결방법 import {useEffect} from "react" import {useLocation} from "react-route-dom" export function Component(){ const {pathname} = useLocation(); useEffect(()=>{ document.querySelector('#scrolled-it').scrollTo(0,0) }, [pathname]) ... } 고민해야할 것 scroll이 되는 대상은 스크롤이 내려진 component이기 때문에 스크..
ConnecTo 2022. 12. 23. 12:53
이전 Prev 1 Next 다음