React에서 스크롤 위치 유지하기 (Scroll Restoration)

date

Sep 27, 2024

slug

Scroll-Restoration

author

status

Public

스크롤 위치 유지의 필요성

사용자가 스크롤한 위치를 기억하는 것은 웹 애플리케이션의 사용자 경험을 개선하는 데 필수적입니다. 특히 긴 목록이나 여러 페이지가 있는 웹사이트에서는 사용자가 이전 페이지로 돌아갔을 때 즉시 원래 작업을 재개할 수 있도록 하는 것이 중요합니다. 이는 사용자가 시간을 절약하고 더 원활하게 탐색할 수 있게 해줍니다.

스크롤 위치 유지하기 위한 방법

스크롤 위치를 유지하기 위해 JavaScript의 History API를 활용할 수 있습니다. History API는 브라우저의 세션 히스토리를 관리하는 기능을 제공하며, 스크롤 복원과 관련된 scrollRestoration 프로퍼티가 있습니다. 이 프로퍼티는 "auto" 또는 "manual" 값을 가질 수 있으며, "manual"로 설정하면 개발자가 스크롤 위치를 직접 관리해야 합니다.

가상의 시나리오

가상의 시나리오로, 무한 스크롤이 적용된 쇼핑몰 페이지를 생각해 보겠습니다. 사용자가 4페이지의 물건들을 보다가 상세 페이지로 이동한 후 다시 돌아왔을 때, 이전에 읽던 스크롤 위치가 유지되어야 합니다.

기본값으로 설정된 scrollRestoration

React에서 스크롤 복원을 위해서는 useEffect 훅을 활용하여 컴포넌트 생명주기와 함께 스크롤 위치를 관리해야 합니다. 기본적으로 history.scrollRestoration의 값은 "auto"로 설정되어 있지만, 실제로는 페이지 이동 시 스크롤이 항상 최상단으로 이동하는 문제가 발생할 수 있습니다.

커스텀 훅 구현하기

React에서 스크롤 위치를 유지하기 위해 커스텀 훅을 구현할 수 있습니다. 다음은 세션 스토리지와 useEffect 훅을 활용하여 스크롤 위치를 관리하는 방법입니다.


// src/hooks/useScrollRestoration.js
import { useEffect, useRef } from 'react';

function saveScrollPos() {
  sessionStorage.setItem('scrollPos', window.scrollY);
}

function restoreScrollPos() {
  const scrollPos = sessionStorage.getItem('scrollPos');
  if (scrollPos) {
    window.scrollTo(0, parseInt(scrollPos, 10));
    sessionStorage.removeItem('scrollPos');
  }
}

export default function useScrollRestoration() {
  const shouldScrollRestore = useRef(false);

  useEffect(() => {
    if ('scrollRestoration' in window.history) {
      window.history.scrollRestoration = 'manual';

      const onRouteChangeStart = () => {
        if (!shouldScrollRestore.current) {
          saveScrollPos();
        }
      };

      const onRouteChangeComplete = () => {
        if (shouldScrollRestore.current) {
          shouldScrollRestore.current = false;
          restoreScrollPos();
        }
      };

      window.addEventListener('beforeunload', () => {
        shouldScrollRestore.current = true;
      });

      window.addEventListener('popstate', onRouteChangeComplete);

      return () => {
        window.removeEventListener('beforeunload', () => {});
        window.removeEventListener('popstate', onRouteChangeComplete);
      };
    }
  }, []);
}

루트 컴포넌트에 추가하기

이 커스텀 훅을 애플리케이션의 루트 컴포넌트에 추가합니다.


// src/App.js
import useScrollRestoration from './hooks/useScrollRestoration';

function App() {
  useScrollRestoration();

  return (
    <div>
      {/* Your application components */}
    </div>
  );
}

마무리 정리

위와 같은 방법으로 React 애플리케이션에서 스크롤 위치를 효율적으로 관리할 수 있습니다. 사용자 경험을 향상시키기 위해 스크롤 위치를 유지하는 것은 매우 중요하며, 이를 통해 보다 매끄러운 탐색이 가능합니다. 사용자가 페이지를 돌아올 때 이전에 보던 위치로 쉽게 복귀할 수 있도록 해주는 이 기능은 더 나은 사용자 경험을 제공하는 데 큰 역할을 합니다.