useSWRInfinite의 setSize, getKey 분석

오늘 useSWR을 사용하여 무한 스크롤링을 구현하다가 잘 되지않아 다른 방법을 찾던 도중 useSWRInfinite 라는 함수를 알게 되었다.

import useSWRInfinite from 'swr/infinite'

// ...
const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite(
  getKey, fetcher?, options?
)

여러 자료를 보고 무한 스크롤링을 구현하긴 했는데, setSize와 getKey의 상관관계가 잘 이해되지않았다.

우선 getKey가 어떻게 생겼고 어떤 역할을 하는지 알아보자.

getKey: 인덱스와 이전 페이지 데이터를 받고 페이지의 키를 반환하는 함수

우리가 볼 페이지 인덱스랑 제일 관련이 깊은 옵션이다.

보통 다음과 같이 구현한다.

const getKey = (pageIndex, previousPageData) => {
  if (previousPageData && !previousPageData.length) return null // 끝에 도달
  return `/users?page=${pageIndex}&limit=10`                    // SWR 키
}

pageIndex 는 현재 우리가 불러온 페이지의 인덱스를 의미한다. 콘솔에 찍어보니 초깃값은 0이다.

previousPageData 는 이름 그대로 이전 페이지 데이터를 의미한다.

getKey는 API URL을 리턴하여, SWR이 데이터를 받아올 좌표를 찍어주는 역할을 한다.

우선 다음 useSWRInfinite 코드를 보자.

  const { data, setSize } = useSWRInfinite<RidingLogResponse>(getKey);

data 는 불러온 데이터를 의미하고, setSize는 가져와야 하는 페이지의 수를 설정한다.

나는 이 부분이 잘 이해가 되지 않았는데, setSize가 getKey의 pageIndex를 의미하는줄 알았다.

하지만 setSize는 말 그대로 가져올 페이지의 수 를 의미하는 것이었다.

만약 setSize(1) 이면 한 개의 페이지만 가져오면 되는것이다.
pageIndex=0 / geyKey가 한 번 호출된다.

만약 setSize(3) 이면 세 개의 페이지를 가져와야한다.
pageIndex=0 / geyKey가 한 번 호출된다.
pageIndex=1 / geyKey가 한 번 호출된다.
pageIndex=2 / geyKey가 한 번 호출된다.

이런식으로 pageIndex가 하나씩 증가하면서 getKey가 setSize안에 있는 숫자만큼 호출되는 구조이다.