[React] Router - 페이지 이동 시 스크롤 위치 조정

 React를 이용하여 페이지 제작 시에 페이지 이동을 Router를 사용하게 되는데, 이때 기본적으로는 스크롤 위치가 이동하지 않습니다.

 

 흔히 웹페이지를 이용해본 사람이라면, 페이지 이동이나 화면 전환이 된 경우 페이지를 맨 위에부터 보기를 원하는데, Router는 스크롤이 해당 위치에 머물게 됩니다.

 

 이를 해결하기 위해서는, 페이지 이동을 인식한 경우, Scroll의 위치를 조정해주면 되는데, 이에 대한 자세한 내용은 아래의 사이트에 잘 정의되어있습니다.

 

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

Declarative routing for React apps at any scale | React Router

 

그중에서 하나를 발췌해보면,

 

// ScrollToTop.js

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

페이지 이동시에 Scroll 위치를 조정해 줄 ScrollToTop.js 페이지를 만들고,

 

// App.js
import { BrowserRouter } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';

function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <... />
    </BrowserRouter>
  );
}

App.js 파일 내용은 기존 사이트 내용과 좀 다르게 작성되었습니다.

<... />은 기존에 작성하는 Reac app이나 html 태그 정보들입니다.