useInfiniteQuery로 무한스크롤 구현하기

간단 소개

react-query의 useInfiniteQuery를 사용하여 무한 스크롤을 구현하고, 뒤로가기 시 이전 스크롤 위치와 상품 목록을 유지하는 방법을 설명합니다.

AI Summary

useInfiniteQuery를 활용한 무한 스크롤 구현
- react-query의 useInfiniteQuery 훅을 사용하여 무한 스크롤을 구현하고, fetchNextPage, hasNextPage, isFetchingNextPage 등의 반환 값을 활용.
- getNextPageParam 옵션을 통해 마지막 페이지를 판단하고, react-intersection-observer의 useInView 훅을 사용하여 뷰포트 내 요소 감지를 통해 다음 페이지를 로딩.
뒤로가기 시 스크롤 및 상품 목록 유지
- 상품 상세 페이지 이동 시 세션 스토리지에 클릭된 상품의 인덱스 값과 스크롤 Y값을 저장하여 페이지 간 이동 시 정보 유지.
- useQueryClient의 prefetchInfiniteQuery, getQueryData, setQueryData를 활용하여 이전 상품 목록을 복원하고 스크롤 위치를 이동.
문제 해결 및 추가 고려 사항
- 레거시 API의 pagination 부재로 인해 getNextPageParam에서 마지막 페이지 여부를 직접 판단해야 하는 문제점.
- 검색 결과 페이지 진입 경로를 활용하여 불필요한 세션 스토리지 값을 제거.