/ REACT

React - 페이지 이동시 최상단 스크롤 방법

React은 다음과 같이 구성되어 있습니다.

React에서 페이지 이동시 최상단 스크롤 방법

프로젝트를 진행하던 도중 useNavigate()를 사용해서 페이지를 전환하던 도중에 전환된 페이지의 스크롤 위치가 전 페이지의 스크롤 위치와 동일해지는 문제를 발견 하였다. 구글에 검색해본 결과 해결방법이 잘 나와있었다.

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이라는 컴포넌트를 만들고

import ScrollToTop from "./components/common/ScrollToTop";

ReactDOM.render(
  <BrowserRouter>
    <ScrollToTop />
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

ScrollToTop 컴포넌트를 라우터 내부에 넣어주면 된다. pathname을 인식하게 하기위해 꼭 컴포넌트를 라우터 내부에 넣어야한다고 한다.


End.