본문 바로가기
Computer Science/React, React Native

React 페이지 전환 시 스크롤 복원

by Write and Remember 2019. 6. 28.

React

 

React Router의 Link을 사용해서 페이지를 이동했을 때

 

SPA이다 보니까 스크롤이 이전 페이지에서 중간에 멈췄으면

 

다음 페이지에서 중간에서 시작하는 점의 문제가 있었습니다.

 

아무래도 유저의 입장에서는 스크롤이 위에서 시작했을 때

 

위로 올릴 필요가 없으니까 편합니다.

 

친절하게도 React Router는 이 점에 대해서 제공하고 있었다.

 

https://reacttraining.com/react-router/web/guides/scroll-restoration

 

React Router: Declarative Routing for React

Learn once, Route Anywhere

reacttraining.com

 

16.8 릴리즈 이후 훅스 사용을 권장하여 훅스의 예제도 있습니다.

 

const ScrollToTop = ({ children, location: { pathname } }) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return children;
};

export default withRouter(ScrollToTop);

 

window.scrollTo(x, y)

 

문서의 지정된 (x, y) 위치로 스크롤합니다.

 

deps에 pathname(경로)을 넣어 pathname(경로)이 바뀔 때마다

 

스크롤을 상단으로 보내버립니다.

 

그런 다음 적용할 컴포넌트 위로 감싸고

 

Router 컴포넌트보다는 아래에 위치합니다.

댓글0