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이기 때문에 스크롤을 바꿔야할 컴포넌트의 position을 0으로 맞춰줘야한다.