리액트 페이지 이동시 스크롤 상단으로 하는 방법

리액트를 사용하며 페이지를 이동했는데 스크롤이 상단으로 안올라가는 문제점이 발견돼서 구글링을 했더니 간단한 방법이 있었다.

ScrollToTop.jsx

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

ScrollToTop 컴포넌트를 Router 안에 넣어주면 해결된다.