Scroll Restoration

Scroll Restoration

---

Browsers are starting to handle scroll restoration with history.

React-router-dom에서 Scroll Restoration 을 기본적으로 지원한다. 옵션엔 auto , manual이 있다.

auto면 이미 방문한 곳의 이전 스크롤을 복원해준다.

현재 프로젝트에서 post list를 보는 곳은 스크롤이 복원되어야하지만, post 상세보기에서는 맨 위로 위치시켜야한다. 따라서 detail 페이지에 라우팅되었을 때 스크롤을 최상단으로 위치하는 함수를 추가해야한다.

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;
}

오 타이포라 코드타입에 아이콘이 추가되었네 ? !

docs에선 해당 방법을 사용하라고 되어있다.

pathName이 변경될 때마다 스크롤을 최상단으로 위치시키는 기능이다.

다른 페이지에서도 사용될 것 같으니 custom으로 빼서 재사용하도록 해야겠다.