[React, TS] react-router 페이지 전환시 ScrollToTop 예제 코드

페이지 전환시, 스크롤 초기화가 필요해졌다.

꼭 필요하지 않아도, 해당 기능을 넣어 놓는것이 좋을 것 같다고 판단했다.

'유저가 정말 작은 화면으로 높이를 고정해서 보고 있을 수도 있겠지..?'

 

여러가지 방법이 있겠지만, 가장 간단한 방법인 것 같고, 타입스크립트 예제가 없어 혹여 누군가에게 도움이 될 수도 있으니 포스팅 한다.

 

각 페이지, 특정 조건 마다 스크롤을 제어해주는 것을 제외하고

페이지가 전환 될 때(= 라우트가 변경될 때) 마다 각 페이지 별로 componentDidMount()에 입력하기에는 번거롭다.

 

그래서 아래 예제를 사용한다. 공식 문서에도 예제가 존재한다.

하지만, 해당 예제에서 새로고침이 발생 되었을 때는 스크롤 이벤트가 작동 되지 않는다. (1회)

검색 해보니, 해결법으로 setTimeout을 사용한다고 한다.

 

위 문제 사항은 따로 찾아보지 않고, 추후 공부해서 포스팅 할 예정이다. (렌더 과정과 연관이 있겠지..)

 

import { PureComponent } from "react";
import { withRouter, RouteComponentProps } from "react-router-dom";

class ScrollToTop extends PureComponent<RouteComponentProps> {
  componentDidUpdate(prevProps: RouteComponentProps) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0);
    // setTimeout(() => {
    //   window.scrollTo(0, 0);
    // }, 300);
    }
  }

  render() {
    return null;
  }
}

export default withRouter(ScrollToTop);

<BrowserRouter>
  <ScrollToTop />
  <Switch>
    <Route exact ... />
    ...
   </Switch>
 </BrowserRouter>

 

React Router: Declarative Routing for React