무한스크롤을 하는 두가지 방법
아래 코드처럼 useInfiniteQuery를 사용해주면된다 해당 함수는 @tanstack/react-query라이브러리를 설치해서 가져와서 사용해주면 된다.
useInfiniteQuery의 구조분해로 data, fetchNextPage, hasNextPage, isFetching 등을 꺼낼 수 있다.
그리고 typescript로 작성됬기때문에 제네릭타입을 넣어줘야하는데 첫번째와 세번째인자는 fetch의 결과물로 보면되고 두번째는 일단 Object고정 4번째는 queryKey를 넣어주면 되는 것으로 보인다.
일단 간략하게
data : 서버에 요청해서 받아온 데이터
fetchNextPage : 다음 페이지를 불러온다.
hasNextPage : 가져올 다음 페이지가 있는지 여부를 boolean값으로 나타내준다.
getNextPageParam: return을 통해 다음 페이지 인자로 해주는 함수. return이 없으면 다음 페이지가 없다는 것을 의미하는 것으로 보인다.
option
queryKey : 쿼리를 구별하여 캐시를 관리하기위한 이름
queryFn : 쿼리가 데이터를 요청하는 데 사용할 함수, API