SPA에서 사용하는 Scroll Restoration 구현하기

import { useLocation } from "react-router-dom";
 
const MyComponent = () => {
  const location = useLocation();
  console.log(location.key); // 예: "ac3df4", "b6a7f9" 등
};

document.body.scrollHeight >= savedScrollY

const observer = new ResizeObserver(() => {
  const scrollable = document.body.scrollHeight > savedScrollY;
  if (scrollable) {
    window.scrollTo(0, savedScrollY);
    observer.disconnect();
  }
});
observer.observe(document.body);

const useSessionStorageByLocationKey = <T>(stateRestorationKey: string) => {
  const { key: locationKey } = useLocation();
 
  const getRestorationState: () => T = () => {
    const restorationState = JSON.parse(
      sessionStorage.getItem(locationKey) ?? "{}"
    );
    return restorationState[stateRestorationKey];
  };
 
  const setRestorationState = (state: T) => {
    const prevState = JSON.parse(sessionStorage.getItem(locationKey) ?? "{}");
    sessionStorage.setItem(
      locationKey,
      JSON.stringify({ ...prevState, [stateRestorationKey]: state })
    );
  };
 
  return { locationKey, getRestorationState, setRestorationState };
};

export const useScrollRestorationState = () => {
  return useSessionStorageByLocationKey<{ x?: number; y: number }>(
    SESSION_STORAGE_KEYS.SCROLL_RESTORATION
  );
};
 
export const usePageRestorationState = () => {
  return useSessionStorageByLocationKey<number>(
    SESSION_STORAGE_KEYS.PAGE_RESTORATION
  );
};

// 현재 페이지가 스크롤 가능한 상태인지 판단하는 함수
// scrollHeight/Width가 현재 뷰포트보다 커야 스크롤이 가능하다고 판단
const getHasScrollableArea = () => {
  const scrollableHeight = document.documentElement.scrollHeight;
  const scrollableWidth = document.documentElement.scrollWidth;
  return (
    scrollableHeight > window.innerHeight || scrollableWidth > window.innerWidth
  );
};
 
export const ScrollRestoration = () => {
  // 현재 location.key 기준으로 스크롤 위치를 저장/복원하는 훅
  const { getRestorationState, setRestorationState, locationKey } =
    useScrollRestorationState();
 
  // 현재 스크롤 위치를 세션 스토리지에 저장
  const setScrollPosition = () => {
    // XXX: 세션 스토리지에 저장할 때 소수점 버림 처리
    setRestorationState({
      x: Math.floor(window.scrollX),
      y: Math.floor(window.scrollY),
    });
  };
 
  // 저장된 위치로 스크롤을 이동시키는 함수
  const scrollToRestorationState = ({
    restorationScrollPosition,
    onRestorationScrollEnd,
  }: {
    restorationScrollPosition: { x?: number; y?: number };
    onRestorationScrollEnd: () => void;
  }) => {
    const documentWidth = document.documentElement.scrollWidth;
    const documentHeight = document.documentElement.scrollHeight;
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
 
    // XXX: 화면이 큰 경우 scrollable 사이즈가 음수가 될 수 있어 0으로 처리
    const scrollableWidth =
      documentWidth - windowWidth < 0 ? 0 : documentWidth - windowWidth;
    const scrollableHeight =
      documentHeight - windowHeight < 0 ? 0 : documentHeight - windowHeight;
 
    // 저장된 위치가 현재 스크롤 가능한 범위를 초과하면 복원하지 않음
    if (
      scrollableWidth < (restorationScrollPosition.x ?? 0) ||
      scrollableHeight < (restorationScrollPosition.y ?? 0)
    )
      return;
 
    // 스크롤 위치 복원
    window.scrollTo(
      restorationScrollPosition.x ?? 0,
      restorationScrollPosition.y ?? 0
    );
 
    onRestorationScrollEnd();
  };
 
  useEffect(() => {
    // 기본 브라우저 스크롤 복원 비활성화
    history.scrollRestoration = "manual";
 
    // 스크롤 이벤트로 현재 위치 저장
    window.addEventListener("scroll", setScrollPosition, { passive: true });
 
    const restorationScrollPosition = getRestorationState();
 
    // 복원할 위치가 있을 경우, ResizeObserver로 콘텐츠 로드/변경 감지
    const resizeObserver = restorationScrollPosition
      ? new ResizeObserver(() => {
          // 스크롤 가능한 상태가 되면 복원 시도
          if (getHasScrollableArea()) {
            scrollToRestorationState({
              restorationScrollPosition,
              onRestorationScrollEnd: () => {
                // 복원 완료 시 옵저버 해제
                resizeObserver?.disconnect();
              },
            });
          }
        })
      : null;
 
    // 이미 페이지가 스크롤 가능한 상태면 바로 복원
    if (restorationScrollPosition && getHasScrollableArea()) {
      scrollToRestorationState({
        restorationScrollPosition,
        onRestorationScrollEnd: () => resizeObserver?.disconnect(),
      });
    }
 
    // 그렇지 않으면 body 요소에 변화가 생길 때까지 감시
    if (restorationScrollPosition) {
      resizeObserver?.observe(document.body);
    }
 
    // 클린업: 스크롤 이벤트 및 옵저버 정리
    return () => {
      window.removeEventListener("scroll", setScrollPosition);
      resizeObserver?.disconnect();
    };
  }, [locationKey]);
 
  return null;
};

const App = () => {
  return (
    <Provider store={store}>
      <QueryConfig>
        <BrowserRouter>
          <ScrollRestoration />
          <ScrollToTop />
          <CustomRoutes />
          ...
        </BrowserRouter>
      </QueryConfig>
    </Provider>
  );
};

const RegistrationCourseContent = () => {
  const [page, setPage] = useState(1);
 
  const {
    getRestorationState: getPageRestorationState,
    setRestorationState: setPageRestorationState,
  } = usePageRestorationState();
 
  // 뒤로가기로 복귀 시 이전에 보고 있던 페이지 번호 복원
  useEffect(() => {
    const restorationPage = getPageRestorationState();
    if (restorationPage) {
      setPage(restorationPage);
    } else {
      // 복구할 페이지가 없다면 새로 진입했다는 뜻이므로 초기화
      setPage(1);
    }
  }, [searchParams.toString()]);
 
  // 스크롤할 때마다 현재 페이지 번호 저장
  // ✅ 처음엔 `page` 상태가 바뀔 때마다 저장하도록 했지만,
  // 복원 직후 상태가 다시 덮이는 버그가 발생해 스크롤 이벤트를 기준으로 저장하도록 바꿨습니다.
  // 무한스크롤의 특성상 스크롤이 곧 사용자 상호작용이기 때문에,
  // 실제 유저가 콘텐츠를 소비한 시점을 기준으로 복원 상태를 저장하는 것이 더 안정적입니다.
  useEffect(() => {
    const handleScroll = () => {
      setPageRestorationState(page);
    };
 
    window.addEventListener("scroll", handleScroll, { passive: true });
 
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [page]);
 
 
 
  // 페이지 번호에 따라 데이터를 불러오는 쿼리
  const { courseList, totalPage } = useRegistrationCoursesByParams({
    categoryId: selectedCategoryId,
    infinitePage: page,
    ...
  });
 
  const viewMoreTriggerRef = useInfiniteScroll(() => {
    if (page >= totalPage) return;
    setPage(page + 1);
  });
 
  return (
    <>
      {/* ...기타 UI 생략 */}
      <RegistrationCourseList
        courseList={courseList}
        ref={viewMoreTriggerRef}
      />
      {/* ... */}
    </>
  );
};