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

문제

상품을 판매하는 웹사이트를 제작중인데 스크롤을 내린 후 마음에 드는 상품을 클릭해서 상품의 상세 정보가 담긴 페이지로 전환 시 스크롤의 위치가 상단으로 올라가지 않고 그대로 유지되는 현상이 발생하였다.

원인

React에서는 페이지 전환 시 주로 React Router를 사용합니다.
React Router와 같은 라우팅 라이브러리를 사용하면 브라우저의 URL이 변경될 때 해당 URL에 대응되는 컴포넌트를 렌더링할 수 있습니다. 이때 React Router는 React 컴포넌트의 라이프사이클과 히스토리 API를 이용하여 스크롤 위치를 관리하고, 페이지 간 전환 시 스크롤 위치를 초기화하지 않도록 도와줍니다.

따라서 React Router를 사용하면, 라우터에 의해 렌더링되는 컴포넌트 간에 스크롤 위치가 기본적으로 유지됩니다.

해결 방안

1. 스크롤을 최상단으로 끌어올려주는 컴포넌트 생성

// ScrollToTop.jsx

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const ScrollToTop = () => {
    const { pathname } = useLocation();

    useEffect(()=>{
        window.scrollTo(0,0);
    },[pathname])
    // 렌더링이 필요 없음.
    return null;
}

export default ScrollToTop;

이 컴포넌트는 useLocation을 이용하여 현재 페이지의 경로를 가져오고, useEffect를 이용하여 경로가 변경될 때마다 window.scrollTo(0,0)을 호출하여 스크롤을 페이지의 맨 위로 이동시킨다.

2. ScrollToTop 컴포넌트를 BrowserRouter의 내부에 포함

// app.jsx

...
return (
  <BrowserRouter>
    <ScrollToTop />
    <Routes>
      <Route path="/" element={<CategoryListView />} />
      <Route path="/:id" element={<CategoryDetailView />} />
      <Route path="/payment" element={<Payment />} />
    </Routes>
  </BrowserRouter>
)
...

React Router의 BrowserRouter는 라우트를 처리하고 URL과 연결된 컴포넌트를 렌더링하는 역할을 합니다. 따라서 ScrollToTop 컴포넌트를 BrowserRouter내에 배치함으로써 페이지 전환 시 스크롤 위치를 관리하는 데 필요한 동작을 수행할 수 있습니다.

Reference

[React] 페이지 이동 시 스크롤 위치 상단으로 고정하기

Scroll Restoration