[React] 페이지 이동 시 스크롤 위치 상단으로 올리기

리액트 프로젝트에서 페이지 간 이동 시 기존 페이지의 스크롤 위치 그대로 이동하게 되는 문제가 발생하게 된다.
해당 문제는React Router의 기본 동작이 브라우저의 기본 동작과 충돌하기 때문에 발생하게 되는데, ScrollToTop 컴포넌트를 만들어 main.jsx 안에서 선언하는 방식으로 해결이 가능하다.

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

/* main.jsx */
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { Provider } from 'react-redux'
import {store} from './store/store.jsx';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
import ScrollToTop from './components/common/ScrollToTop.js';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <ScrollToTop/>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>,
)

Reference

[React] 페이지 이동 시 스크롤 위치 상단으로 고정하기
[리액트 React] 페이지 이동 시 자동으로 스크롤 맨 위로 오게 하기