[React] 페이지 이동 시 스크롤 위치가 하단에 있을 때 ScrollToTop

사이드 프로젝트에서 푸터를 만들고 난 뒤

하단에 스크롤 위치한 상태에서 다른 카테고리 페이지로 이동하면

그 페이지 역시 스크롤이 하단에 위치한 채 렌더링되는 문제가 생겼다.

 

그래서 렌더링될때 스크롤이 항상 상단에 위치시키기 위한 컴포넌트를 만들었다.

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

export default ScrollToTop;

"/"와 같은 pathname이 바뀔때마다 스크롤이 상단에 위치하도록 하는 로직을 짜고

 

최상위컴포넌트인 App.tsx에 가장 먼저 호출하니 해결됐다.

 

그

러

나

 

게시물 상세페이지는 /post/detail/${id}의 주소로 되어있어

pathname이 같아 적용되지 않았다.

 

ScrollToTop 컴포넌트의 useEffect dependency array에 useParams로 받은 id를 넣어봤으나 해결되지 않았다.

그래서 급한대로 detail페이지 상단에 똑같이 넣어주니 해결됐다.

  useEffect(()=>{
      window.scrollTo(0, 0);
  },[])

 

시간되면 ScrollToTop 내부에서 해결방법을 찾아봐야겠다!