React에서 페이지 이동시 스크롤 제일 위로 올리는 방법

박진현·2021년 12월 20일
0

에러핸들링

목록 보기
23/28

프로젝트 중 페이지 이동시 이전 페이지의 스크롤 위치 그대로 이동되는 것을 발견했다.
이를 해결하기 위해 페이지 이동시마다 스크롤 위치를 제일 위로 올리는 방법을 찾아봤다.

먼저 공식문서의 방법이다.
https://v5.reactrouter.com/web/guides/scroll-restoration

이러면 페이지를 이동할 때 마다 스크롤이 위로 올라간다.


하지만 위와 같이 페이지에서 탭만 변하는 상황이라면..?
이럴땐 페이지 상단에

 useEffect(() => {
       window.scrollTo(0, 0);
   }, [탭의상태값]);

이렇게 작성 해주면 된다!

profile
👨🏻‍💻 호기심이 많고 에러를 좋아하는 프론트엔드 개발자 박진현 입니다.

0개의 댓글