오늘 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안에 있는 숫자만큼 호출되는 구조이다.