useInfiniteQuery를 활용한 무한 스크롤 구현하기

올리브영 검색 결과 페이지의 신규 아키텍처 전환 경험을 바탕으로 무한 스크롤(Infinite Scroll) 구현 방식을 공유한다. 기술 스택으로는 Next.js 12, React Query 3.39.0, TypeScript 4.7.4를 사용했다.

useInfiniteQuery 훅을 사용하면 다음 페이지 데이터 요청을 위한 fetchNextPage, 다음 페이지 존재 여부를 확인하는 hasNextPage 등의 기능을 간편하게 활용할 수 있다. 특히 getNextPageParam 옵션을 통해 마지막 페이지를 판별하고 데이터 페칭을 제어한다.

구현 시에는 react-intersection-observer의 useInView 훅을 활용하여 뷰포트에 마지막 요소가 진입하는 시점을 감지한다. 데이터 로딩 중에는 Skeleton 컴포넌트를 노출하여 사용자 경험을 개선하며, 데이터 페칭 상태에 따라 스켈레톤과 실제 콘텐츠를 적절히 전환한다.