[React] 페이지 이동 시 화면 최상단으로 스크롤(ScrollToTop)

프로젝트를 진행하다보면 여러 페이지가 나오는데 페이지 간 이동시 가장 최근 스크롤 위치에서 벗어나지 않는 경우를 흔하게 만나게 될 것이다. 그래서 페이지 이동 시 화면 최상단으로 올라갈 수 있도록 스크롤 이벤트를 구현했다.

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

이렇게 만든 컴포넌트를 App.js 또는 index.js, navigation이 이루어지는 파일에 import 하면 된다.

// Navigation.js

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Main from '#pages/main';
import Login from '#pages/login'
import ScrollToTop from '#components/ScrollToTop';

const Navigation = () => {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <Routes>
        <Route path='/' exact element={<Main />} />
        <Route path='/login' exact element={<Login />} />
      </Routes>
    </BrowserRouter>
  )
}

이렇게 되면 다른 페이지로 이동했을 때 최근 위치에 머무르게 되는 일이 없어진다.