리액트 페이지 이동할 때마다 스크롤 맨위로 바꾸기 (ScrollToTop)

리액트에서 라우터로 페이지 이동하면 현재 스크롤 위치가 그대로 유지됩니다.  따라서 제대로 동작하는 웹사이트를 만드려면, 페이지 이동시마다 스크롤 위치를 맨위로 세팅해줘야 합니다.

이 글에서는 리액트에서 페이지 이동할 때 스크롤을 자동으로 맨위로 이동하는 방법에 대해서 알아보겠습니다. (ScrollToTop)

왜 스크롤 위치가 그대로인가요?

그 이유는 리액트는 페이지 이동하는 것은 실제 페이지가 이동하는 것이 아니고, 단지 컴포넌트 상태만 바뀌는 것이기 때문입니다. 스크롤 위치값 정보도 바뀌지 않습니다.

ScrollToTop 컴포넌트 만들기

스크롤 위치를 자동으로 맨위로 만드는 가장 단순한 방법은 ScrollToTop 컴포넌트를 따로 만드는 방법입니다. 다음과 같이 ScrollToTop 컴포넌트를 작성합니다.

import { Component } from 'react';
import { withRouter } from 'react-router';

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

ScrollToTop 컴포넌트는 componentDidUpdate가 호출될 때 현재 props의 location 값과 이전 props의 location 값을 비교합니다. 만약 비교 값이 서로 다르다면 윈도우의 스크롤 위치를 맨위로, 즉 (0, 0) 좌표로 이동해줍니다.

ScrollToTop 컴포넌트 사용하기

ScrollToTop 컴포넌트를 Router 컴포넌트 밑에 두고, 그외 하위 컴포넌트들을 감싸는 사용하면 이제 페이지 이동 시마다 스크롤이 자동으로 최상단으로 이동하는 것을 볼 수 있습니다.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { ScrollToTop } from './ScrollToTop';

function App() {
  
  return (
    <Router>
      <ScrollToTop>
        ...
      </ScrollToTop>
    </Router>
  );
}

export default App;