[React] 페이지 전환시 스크롤 맨 위로 이동시키기

서론

React를 이용해 SPA를 만들 때면, 페이지를 이동할 때마다 스크롤의 위치가 이전 페이지 그대로 고정되어 불편한 점이 많았다.

편의성 개선을 위해 페이지를 전환할 때마다 스크롤을 맨 위로 이동시키는 방법에 대해 알아보겠다.

---

컴포넌트 만들기

하나의 특정 동작만을 위한 코드가 필요하기 때문에 개별 컴포넌트에 코드를 적는다.

또, 길지 않은 코드지만 가독성면에서도 개별 컴포넌트로 관리하는 것이 좋아 보인다.

컴포넌트 이름은 아무렇게나 지어도 상관없다.

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

export default function PageToTop() {
    const { pathname } = useLocation();

    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname]);

    return null;
}

 

useEffect 훅을 사용해서 현재 페이지의 pathname값이 변경될 때마다 사용자의 스크롤을 맨 위로 올려주는 로직이다.

---

생성한 컴포넌트 라우터 안에 넣어주기

생성한 컴포넌트는 BrowserRouter 내부에 넣어주면 된다. 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { RecoilRoot } from 'recoil';
// css
import './CSS/index.css';
// components
import PageToTop from './PageToTop';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <BrowserRouter basename={process.env.PUBLIC_URL}>
            <RecoilRoot>
                <PageToTop /> // ---> 페이지 전환시 스크롤 맨 위로
                <App />
            </RecoilRoot>
        </BrowserRouter>
    </React.StrictMode>
);

---

완성본

 

라우터 전환시 페이지가 맨 위로 가는 것을 알 수 있다.

https://github.com/mediumryan/ryan-shopping

GitHub - mediumryan/ryan-shopping: Shopping app with react

---

참고

 

https://velog.io/@tlatjdgh3778/React-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99-%EC%8B%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%A7%A8-%EC%9C%84%EB%A1%9C-%EC%98%A4%EA%B2%8C-%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

React 페이지 이동 시 스크롤 맨 위로 오게 하는 방법