프로젝트 중 페이지 이동시 이전 페이지의 스크롤 위치 그대로 이동되는 것을 발견했다.
이를 해결하기 위해 페이지 이동시마다 스크롤 위치를 제일 위로 올리는 방법을 찾아봤다.
먼저 공식문서의 방법이다.
https://v5.reactrouter.com/web/guides/scroll-restoration
이러면 페이지를 이동할 때 마다 스크롤이 위로 올라간다.
하지만 위와 같이 페이지에서 탭만 변하는 상황이라면..?
이럴땐 페이지 상단에
useEffect(() => {
window.scrollTo(0, 0);
}, [탭의상태값]);
이렇게 작성 해주면 된다!