[React] 페이지 전환 시 스크롤 위치가 유지되는 문제

개인 프로젝트를 진행하면서 페이지를 전환하는 경우 이전 페이지의 스크롤이 아래로 내려가 있었다면, 그 위치를 유지한채로 다음 페이지로 이동하는 문제가 있었습니다.

원인

• 브라우저는 새로운 페이지를 로드할 때 대부분 상단부터 시작하지만 리액트와 같은 SPA에서는 페이지 전환 시에도 DOM이 완전히 새로고침되지 않고, 필요한 부분만 업데이트 되기 때문에 스크롤 위치가 유지될 수 있습니다.

해결방법

// 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;
}

• useLocation을 이용해 현재 pathname을 가져옴
• useEffect를 이용해 pathname이 변경되는 경우(페이지 이동)에 화면 위치를 x,y(0,0)으로 변경해준다

저는 해당 컴포넌트를 최상단인 index.js에 넣어줬습니다.

// index.js
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <BrowserRouter>
    <RecoilRoot>
      <ScrollToTop />
      <App />
    </RecoilRoot>
  </BrowserRouter>
);