[250227] Tanstack Query의 useInfiniteQuery

📌 TanStack Query의 useInfiniteQuery 개념과 기본 구조

오늘은 TanStack Query의 useInfiniteQuery를 정리해본다.
스크롤 페이징이 필요한 경우 유용하며, 서버에서 데이터를 “페이지 단위”로 가져올 때 활용할 수 있다.

---

🚀 1. useInfiniteQuery 기본 개념

useInfiniteQuery는 일반적인 useQuery와 다르게 “다음 페이지를 가져오는 함수”를 제공한다.
이를 통해 스크롤이 특정 위치에 도달하면 추가 데이터를 요청하는 무한 스크롤 기능을 쉽게 구현할 수 있다.

🔹 핵심 개념:

1.	getNextPageParam → 다음 페이지를 가져오기 위한 정보를 설정한다.
2.	fetchNextPage → 데이터를 불러오는 함수
3.	data.pages → 기존 데이터 + 새롭게 불러온 페이지 데이터가 포함된 배열

---

🏗 2. useInfiniteQuery 기본 사용법

const usePosts = () => {
 return useInfiniteQuery({
   queryKey: ['posts'],
   queryFn: async ({ pageParam = 1 }) => {
 const res = await fetch(`/api/posts?page=${pageParam}`);
 return res.json();
};,
   getNextPageParam: (lastPage, allPages) => {
     return lastPage.nextPage ?? undefined;
   },
 });
};

📌 설명:

•	fetchPosts → API 요청 함수, pageParam을 이용해 페이지 단위로 데이터를 가져온다.
•	getNextPageParam → lastPage의 정보를 이용해 다음 페이지가 있는지 판단한다.
•	usePosts → useInfiniteQuery를 사용해 무한 스크롤 데이터를 관리하는 훅을 만든다.

---

🎯 정리

•	useInfiniteQuery를 사용하면 무한 스크롤 기능을 쉽게 구현 가능
•	fetchNextPage, hasNextPage, isFetchingNextPage를 활용해 더 보기 버튼 추가 가능

추가로 많은 내용이 있지만 서버가 담고 있는 모든 내용을 전부 다 가져와 렌더링 하는 행위를 방지하기 위해 필요한 내용은 이정도면 충분할 것 같다.

---

✅ 마무리

tanstack Query 라이브러리를 사용하면서 query를 활용해 서버 상태를 따로 나누는 것은 좋지만, 서버의 정보가 방대하면 오히려 추가적인 리소스가 필요하지 않을까 우려도 있었는데 정보의 일부분만 순차적으로 받아올 수 있는 기본 기능이 있어 편리하였고 또 개념만 익혀놓으면 사용하는 것도 어렵지 않기 때문에 굉장히 만족스러운 경험이였습니다.