React Query로 무한 스크롤 구현하고, 뒤로 가기 시 스크롤 위치까지 완벽 복원!

React Query의 useInfiniteQuery 훅을 사용하여 무한 스크롤을 구현함

react-intersection-observer의 useInview 훅으로 스크롤 위치를 감지함

세션 스토리지와 useQueryClient를 활용하여 뒤로 가기 시 스크롤 복원

useInfiniteQuery의 핵심 원리

useInfiniteQuery는 페이지네이션을 쉽게 구현하도록 돕는 React Query 훅이다. 구체적으로 getNextPageParam과 getPreviousPageParam 옵션을 통해 다음/이전 페이지를 결정한다. 따라서 fetchNextPage를 호출하여 다음 데이터를 불러오고, hasNextPage로 다음 페이지 존재 여부를 확인한다.

스크롤 위치 복원을 위한 전략

뒤로 가기 시 스크롤 위치를 복원하기 위해 세션 스토리지를 활용한다. 상품 클릭 시 상품 인덱스와 스크롤 Y값을 저장하고, 검색 결과 페이지 재진입 시 useQueryClient로 데이터를 불러온다. 결과적으로 prefetchInfiniteQuery를 통해 캐싱된 데이터를 활용하여 부드러운 UX를 제공한다.

useInview 훅 활용법

react-intersection-observer의 useInview 훅을 사용하여 뷰포트 진입 여부를 감지한다. ProductCard의 마지막 요소에 ref를 걸어 inView 상태를 모니터링한다. 따라서 fetchNextPage를 호출하여 다음 페이지 데이터를 로드하고, isFetchingNextPage 상태를 통해 로딩 UI를 표시한다.