[250205] 이거 스크롤 저장이 왜 안 되는 거야

오늘은 프로젝트 진행을 하면서 디테일 페이지를 구성하였습니다.

라우팅을 통해 SPA 형식으로 페이지를 이동하고 뒤로 돌아가는 방식에서 state를 관리하여 이전 상태로 복원하고 싶었습니다.

그리하여! 프로젝트에 구성을 하기 시작하였는데...

Try 1. useLocation

우선 useLocation을 사용하여 location.state를 통하여 접근을 하려고 하였습니다.

const scrollPosition = window.scrollY;

navigate(`/details?id=${pokemon.id}`, {
      state: { scrollPosition },
    });
  };

이전 페이지에서 detail 페이지로 넘어갈 때에 state를 넘겨줍니다.

const location = useLocation();
const prevState = location.state || { scrollPosition: 0 };


//...중략
{/* 뒤로가기 버튼 */}
<button onClick={() => navigate(-1, { state: prevState })}>뒤로가기</button>

useLocation()를 통해 페이지 이동 시 추가적인 데이터를 전달받아 그 데이터를 prevState에 저장하여 console.log로 확인까지 되었습니다.

하지만 여기서 뒤로 가는 버튼에서 navigate(-1)을 사용하여 브라우저의 히스토리를 따라 이동하였지만 state를 유지하지 않게 되어 실패하였습니다.

Try 2. sessionStorage

state를 다시 Dex 페이지에 가져오지 못해 scrollY를 불러오지 못하는 상황이 되었습니다. 그리하여 방법 두 번째, sessionStorage를 활용하고자 하였습니다.

sessionStorage에 저장하고 뒤로 갈 때 복원하려 했습니다.

sessionStorage.setItem("scrollPosition", window.scrollY);

이전 페이지의 스크롤 값을 저장하여 sessionStorage에 저장하는 코드를 detail 페이지로 넘어가는 이벤트에 심어둡니다.

const prevScroll = sessionStorage.getItem("scrollPosition") || 0;

그런 후 prevScroll을 통해 sessionStorage에 저장된 스크롤 위치가 있으면 불러옵니다.

그런 후 useEffect의 기능을 이용해 detail 페이지가 unMount 될 때에 값을 불러옵니다.

하지만 이 과정에서 정확한 이유는 모르겠으나 sessionStorage에 저장하는 값이 즉시 반영되지 않았거나, useEffect가 너무 빨리 실행되어 복원 기능이 작동을 안 하였을 가능성이 있습니다.

그러하여..

아직 완성은 못 했지만 간단히 도전해 본 기능으로, 이번 도전을 발판 삼아 다음에는 useEffect에 setTimeout을 통해 스크롤 복원을 강제 적용하여 진행할 계획입니다. 이번 트러블 슈팅은 정확한 원인도 못 찾았고 무조건 구현해야겠다는 마음이 없어 간단히 도전만 해본 것이라 구체적인 분석이 잘 이루어지지 않았습니다.

과제의 기본 구현을 다 마친 후 남는 시간에 도전을 다시 해보겠습니다.