[React] 페이지 이동 시 스크롤 위치 초기화

문제

페이지 이동 시 스크롤이 최상단에 위치했는데 언제가부터 이전 페이지에서의 스크롤 위치로 로딩되었다.

해결법

ScrollToTop 컴포넌트를 만들어 필요한 컴포넌트 내부에서 호출한다.

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

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Main from './Main';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Main />);

현재 진행중인 프로젝트에서는 index.js 에서 Main 컴포넌트를 렌더한다.
그래서 Main.js의 BrowserRouter 안에 ScrollToTop 컴포넌트를 추가했다.

// Main.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import ScrollToTop from './components/ScrollToTop';

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

export default Main;

Router 안에 선언해주어야 pathname을 인식할 수 있다.

다시 페이지 이동 시 스크롤이 맨 위로 오도록 해결 완료 😁

참고

• React 페이지 이동 시 스크롤 위치 조정하기