리액트 스크롤 상단으로 위치 시키기 리액트 라우터

리액트 스크롤 상단으로 위치 시키기, 리액트 라우터

 

 😨 스크롤의 위치가?!

 

리액트 라우터를 사용하는 경우 이전 페이지에서 스크롤이 내려가 있는 상태에서 다른페이지를 불러 왔을 때, 스크롤의 위치가 이전 페이지와 동일한 현상을 경험 할 수 있다. 

 

문서에서 scroll-restoration이라고 소개한 코드가 있다. 

 

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

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

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

  return null;
}

 

함수형으로 된 코드를 가져왔다.

 

hook을 사용하여 pathname(경로)가 바뀌는 것을 감지하면 window 객체의 속성으로 스크롤을 최상단으로 옮기는 코드다.

ScrollToTop.tsx라는 파일을 만들고<BrowserRoute><ScrollToTop /></BrowserRoute> 브라우져 라우터 안에 위치 시키면 작동이 된다고 한다.

 

다만, 기능이 예상한 대로 작동 하지 않을 수 있다. 나의 경우에는 window 객체가 아니라, main 태그에서 스크롤이 생긴 경우라서 코드가 조금 다르다.

 

처음에 문제되는 상황을 보고 아주 쉽게 해결 할 수 있을 거라고 생각했다. 아마 아래의 블로그가 없었더라면 해결을 못했을 수도 있다는 생각이 든다.