원인

React Router를 사용해 페이지 이동시 전 페이지 스크롤 위치로 로드되는 이슈가 있었고, 대신 스크롤 탑으로 로드되고 싶어서 ScrollRestoration 찾아 보게 되었다.

---

ScrollRestoration

이 구성 요소는 로더가 완료된 후 위치가 변경되면 브라우저의 스크롤 복원을 에뮬레이트하여 도메인 간에도 스크롤 위치가 올바른 위치로 복원되도록 보장합니다.

• 이 기능은 데이터 라우터를 사용하는 경우에만 작동합니다.

데이터 라우터란?

react-router-dom v6에서 도입된 개념으로, 데이터 로딩과 라우팅을 통합하여 보다 복잡한 라우팅 시나리오를 쉽게 처리할 수 있도록 도와줍니다. 이 기능은 createBrowserRouter, createHashRouter 등을 사용하여 데이터 중심 라우팅을 설정할 때 활성화됩니다

---

ScrollRestoration 예시

import { ScrollRestoration } from "react-router-dom";

function RootRouteComponent() {
  return (
    <div>
      {/* ... */}
      <ScrollRestoration />
    </div>
  );
}

• 놀랍게도 라우터 설정해둔 코드에 ScrollRestoration만 넣어줘도 원하는 대로 잘 작동한다.

---

참고 https://reactrouter.com/en/main/components/scroll-restoration