📚 Reference

📜 Chapter

useQuery

Query Keys

react-intersection-observer

‣

‣

‣

useInfiniteQuery

• useInfiniteQuery
• 무한 스크롤(Infinite Scroll)이나 '더 보기' 버튼과 같이 데이터를 페이지 단위로 계속해서 불러와야 하는 UI를 구현할 때 사용하는 아주 강력한 훅이다.
• 일반적인 useQuery와 달리, 여러 페이지의 데이터를 하나의 배열에 차곡차곡 쌓아준다는 점이 핵심이다.

동작 원리

• useInfiniteQuery는 데이터를 pages라는 배열 안에 저장한다.
• 각 페이지는 API 호출의 결과값이며, 이 페이지들을 관리하기 위해 getNextPageParam이라는 설정이 필수적으로 필요하다.

주요 반환값 (Return Values)

• data.pages: 지금까지 불러온 모든 페이지 데이터가 담긴 배열이다.
• fetchNextPage: 다음 페이지 데이터를 요청할 때 호출하는 함수이다.
• hasNextPage: 다음 페이지가 있는지 여부를 나타내는 불리언 값이다.
• isFetchingNextPage: 다음 페이지를 로딩 중인지 확인하는 상태 값이다.

예제