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

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

리액트로 웹을 만들다가 해당 문제를 만났는데요.

 

문제의 내용은 이렇습니다.

1. A페이지에서 스크롤을 50 만큼 내렸다.

2. A페이지에서 메뉴를 눌러 B페이지로 이동을 한다.

3. B페이지에서 스크롤이 50 만큼 내려가져있는 상태로 페이지가 열린다.

 

각각의 페이지마다 이런 top버튼을 만들 수도 없잖아요?

 

 

자, 지금부터 해당 문제에 대한 해결 방법에 대해 알아볼게요.

이 포스팅에 적혀 있는 해결법은 react-router 문서에도 적혀 있으니 참고 바랍니다.

  ScrollTop.js

먼저 새로운 컴포넌트를 만들어 주세요.

저는 이 컴포넌트 파일 이름을 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;
}

 

 

  index.js

그 다음, index.js에 아래 코드처럼 추가해 주면 되는데요.

여기서 주의할 점은 ScrollTop이 셀프로 닫혀 있다는 겁니다.

<App />를 감싸고 있지 않으니 주의해 주세요!

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import 'bootstrap/dist/css/bootstrap.min.css';
import ScrollTop from './components/ScrollTop';

ReactDOM.render(
  <BrowserRouter>
    <ScrollTop/>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);