React : 페이지 이동 후 스크롤 위치

💡노마드코더 수강이후 개인작업을 하며 직면한 문제의 해결과정을 기록한 포스트입니다.

목표

1. 페이지 이동했을 때 스크롤의 위치가 이동 전 페이지에서의 스크롤 위치와 동일함
2. 해결책을 찾아 적용한다.

이유

SPA페이지의 특징 때문으로 보여진다.
실제로는 한개의 html파일에서 화면이 render되는 형식이다보니 브라우저가 인식하는 스크롤의 위치는 페이지 이동 전의 위치가 맞는 것...!

방법

ScrollTop 컴포넌트를 만들고 해당 컴포넌트를 App.js에 임포트 한다.

해결

컴포넌트 ScrollTop에서 현재 location의 정보를 반환하도록 useLocation()을 사용하기로 했다.

useLocation
현재 location개체를 반환하는 React-router-dom의 Hook.
👉🏻React-router-dom 공식문서

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

만들어진 ScrollTop.js를 App.js에 임포트!

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from 'react-router-dom';
import PageIndex from './pages/PageIndex';
import PageProducts from './pages/PageProducts';
import './styles.scss';
import PageProducts2 from './pages/PageProducts2';
import ScrollToTop from './component/ScrollTop';

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <ScrollToTop />
      <Routes>
        <Route path="/" element={<PageIndex />} />
        <Route
          path="/products/personal"
          element={<PageProducts />}
        />
        <Route
          path="/products/company"
          element={<PageProducts2 />}
        />
      </Routes>
    </Router>
  );
}

export default App;

완료✨