React Query) 4. React query로 InfiniteScroll 무한 스크롤 구현하기

1. InfiniteScroll 이란?

전에 포스트에도 써놓긴 하였으나 1억 개의 데이터를 모두 가져오면 서버 부하가 생기기 때문에 데이터를 조금씩 나눠 받는 방법이며 pagenation과 다르게 스크롤을 내리거나 다음 데이터를 불러오는 버튼을 클릭할 때 데이터를 추가적으로 불러오는 방법입니다.

백엔드는 구현되어있다는 가정하에 진행하겠습니다.

 

2. useInfinityQuery 설명

지금까지는 useQuery를 사용하였으나 무한 스크롤은 useInfinityQuery라는 다른 함수를 사용합니다.

공식문서를 가져온 것인데요, 인수로 (키값, fetch api, options)는 동일하게 들어가나 options에

getNextPageParam이라는 옵션을 넣어 사용합니다.

 

getNextPageParam의 인수에는 lastPage와 allPages가 들어있는데요 

lastPage에는 가장 최근에 오픈한 data가 들어있고 allPages에는 지금까지 오픈한 모든 데이터가 들어있습니다.

예를 들어 한번에 데이터가 4개까지 열리는 무한 스크롤에서 lastPage에는 

이러한 데이터가 들어있고 allPages에는

이러한 데이터가 들어있죠

 

 

3. 구현

 

저희는 getNextPageParam을 사용해 무한 스크롤을 구현해 볼 겁니다. 

핵심 흐름을 말하자면.

핵심 1 : getNextPageParam의리턴 값은 pageParam으로 사용할 것이다.

핵심 2 : pageParam을 파라미터로 사용해 api를 호출할 것이다.

 

먼저 api부터 작성해보겠습니다.

const fetchColors = async ({ pageParam = 1 }) => {
  const response = await axios.get(
    `http://localhost:4000/colors?_limit=4&_page=${pageParam}`
  );
  return response.data;
};

color 데이터를 받아오는데, 4개씩 {pageParam} 번째 페이지의 데이터를 받아온다는 뜻입니다.

 

  const {
    isLoading,
    isError,
    error,
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    ...
    // 이런 값들을 빼올 수 있다 라는것만 알면 됩니다.
  } = useInfiniteQuery<Color[], Error>(["colors"], fetchColors, {
    getNextPageParam: (_lastPage, pages) => {
    // 하드코딩 했지만 실제로 쓸땐 동적으로 바꾸시면 됩니다
      if (pages.length < 4) {
        return pages.length + 1;
      } else {
        return undefined;
      }
    },
  });

여러 방법이 있겠지만 저는 pages.length를 사용하여 작성해 보았습니다.

제 데이터는 isLast라는 column이 없어서 적용하진 못했습니다. 있다면 더 짧고 쉽게 코딩이 될 거 같네요

 

저도 첨에 헷갈렸고 헷갈려하실 점이 있는데

"getNextPageParam에서 pages.length+1을 return 한 거까진 알겠는데, 그 값이 어디로 가서 어떻게 쓰이나요?"

 

const fetchColors = async ({ pageParam = 1 }) => {

fetchColors에 자동으로 들어갑니다 pageParam을 파라미터로 받은 것도 이 때문입니다.

 

그러고 밑에 대충 퍼블리싱을 해주고 결과를 보면?

이랬던게

 

이렇게 됩니다.

잘 불러와집니다