[React] 페이지 이동 시 스크롤 화면 최상단 이동하기

페이지 1	페이지 1에서 버튼(userNavigate())을 눌러 페이지 2로 이동

React와 react-router-dom으로 페이지를 구현하는 경우 <Link>나 useNavigate()를 통해 페이지를 이동하면 가장 최상단으로 이동하지 않고 현재 보고 있는 스크롤 위치로 이동하는 경우가 종종 발생합니다.

 

 

이런 문제를 해결하기 위한 가장 손쉬운 방법은 페이지(컴포넌트)마다 window.scrollTo(0, 0);를 작성하기가 있습니다.

 

하지만 매 페이지 컴포넌트에 이를 작성하기는 번거롭기 때문에 별도의 컴포넌트를 만들어서 사용하는 방법을 react-router-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;
}

먼저 ScrollToTop.jsx 코드를 작성합니다.

 

위 코드는 useLocation()과 useEffect()를 사용하여 주소가 변경될 때마다 window.scrollTo()를 이용하여 화면 최상단으로 이동하도록 작성되어 있습니다.

 

 

 

// index.js || app.js || etc...
function App() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );
}

다음으로 <Router > 혹은 <RouterBrowser>의 하위에 <ScrollToTop>컴포넌트를 추가해줍니다.

 

다시 화면으로 돌아가서 페이지를 이동하면 원했던 페이지 이동 시 최상단으로 이동하는 기능이 적용되어 있습니다. 

 

 

 

 

Reference

https://v5.reactrouter.com/web/guides/scroll-restoration