Next.js 뒤로가기 스크롤 유지(23.11.15)

문제 상황

  1. useSWRInfinite 를 사용하여 리스트 페이지 인피니티 스크롤 적용

  2. 스크롤을 내린 후 리스트를 클릭하여 route 이동

  3. 이동한 페이지에서 뒤로가기 시도

  4. SWR에서 불러온 데이터는 유지되지만 scroll 이동 동작 후 다시 top으로 이동

임시 해결

디버깅 해보니 뒤로가기 동작으로 다시 리스트 페이지로 돌아왔을때 didmount 시점에 useEffect에서 session storage에 저장한 스크롤 위치값으로 scrollTo로 스크롤을 이동시키지만 어떤 이유인지 모르겠지만 다시 최상단으로 스크롤 이동하여 setTimeout을 이용하여 didmount 시점에 비동기로 scrollTo 실행하여 스크롤 위치 이동시키는 함수 실행을 늦춤

궁금한 점

현재 코드상에 페이지 스크롤 위치를 최상단으로 이동시키는 코드가 없는데, didmount 시점에 스크롤 위치를 유지시키도록 처리했으나 다시 scroll 위치가 최상단으로 이동하는것...

Last updated