Infinite Scroll - Scroll Position Restoration

TanStack Query와 인피니티 스크롤 사용 시 페이지 이동 후 돌아왔을 때 스크롤 위치를 복원하는 두 가지 방법을 학습합니다.

방법 비교

특성ZustandTanStack Query
데이터 저장메모리 (전역 상태)메모리 (캐시)
스크롤 저장전역 상태sessionStorage
장점직관적, 유연자동 캐싱, 데이터 신선도 관리
단점메모리 사용량 증가스크롤 별도 관리 필요

테스트 방법

  1. 위의 데모 페이지 중 하나를 선택합니다.
  2. 리스트를 스크롤하여 여러 페이지를 로드합니다.
  3. 아무 포스트나 클릭하여 상세 페이지로 이동합니다.
  4. "목록으로 돌아가기" 또는 브라우저 뒤로가기를 클릭합니다.
  5. 스크롤 위치가 복원되었는지 확인합니다.