useSWR 훅: 가져오기, 로딩, 오류 상태

useSWR(key, fetcher, options)는 기본 훅입니다. key는 캐시 키(일반적으로 URL 문자열)이고, fetcher는 데이터를 반환하는 비동기 함수이며, options는 선택적인 구성 객체입니다.

이 훅은 data, error, isLoading, isValidating 및 mutate 함수를 포함하는 객체를 반환합니다.

key는 문자열 URL, [url, params] 배열 또는 null일 수 있습니다. 문자열 키는 단순한 GET 요청에 매핑됩니다. 배열 키를 사용하면 userId나 필터 같은 변수를 캐시 식별자에 포함할 수 있습니다.

null을 전달하면 요청이 완전히 비활성화되므로, 필요한 데이터를 아직 사용할 수 없을 때 조건부로 데이터를 가져오는 데 유용합니다.

데이터 가져오기 함수는 키(또는 배열 키를 펼친 인수)를 받고 Promise를 반환해야 합니다. Promise가 해결된 값이 data가 됩니다. 데이터 가져오기 함수에서 예외가 발생하면 error 속성이 설정됩니다.

예: (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

처음 로딩하는 동안 data는 undefined이며, 성공하면 데이터 가져오기 함수가 반환한 값이 됩니다. 데이터 가져오기 함수에서 예외가 발생하지 않는 한 error는 undefined이고, 예외가 발생하면 발생한 오류 객체를 담습니다.

오류 메시지를 렌더링하려면 if (error)를 확인하고, 명확한 대체 UI를 제공하면서 로딩 스켈레톤을 렌더링하려면 if (!data)를 확인합니다.

isLoading은 캐시된 데이터가 없고 요청이 진행 중일 때, 즉 이 키를 처음 로드할 때만 true입니다. isValidating은 요청이 진행 중인 동안 언제나 true이며, 캐시된 데이터가 이미 있는 상태에서 백그라운드 재검증을 수행할 때도 true입니다.

스켈레톤 화면에는 isLoading을 사용하고, 백그라운드 새로 고침을 나타내는 은은한 스피너에는 isValidating을 사용합니다.

SWRConfig을 사용하면 하위 트리의 모든 useSWR 호출에 적용할 기본 데이터 가져오기 함수, dedupingInterval, refreshInterval, onError 처리기 및 기타 옵션을 정의할 수 있습니다. 훅마다 옵션을 반복하는 대신 구성을 중앙에서 관리할 수 있습니다.

SWRConfig 공급자를 여러 개 중첩하면 앱의 서로 다른 영역에 서로 다른 기본값을 적용할 수 있습니다.

요청을 건너뛰려면 키로 null을 전달합니다: useSWR(isLoggedIn ? '/api/user' : null, fetcher). 키가 null이 아닌 값이 될 때까지 SWR은 데이터를 가져오지 않습니다.

이는 React Query의 skip 옵션보다 깔끔합니다. 키가 null에서 문자열로 바뀌면 첫 번째 가져오기가 자동으로 실행됩니다.

종속된 요청에는 SWR 훅을 연결해 사용합니다: const { data: user } = useSWR('/api/me', fetcher) 다음에 const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher)를 호출합니다. 두 번째 훅은 첫 번째 훅이 해결될 때까지 기다립니다.

이 패턴은 useEffect를 연쇄적으로 사용하는 방식을 피하고 데이터 의존성을 선언적이고 읽기 쉽게 유지합니다.

Header 컴포넌트와 Sidebar 컴포넌트가 모두 useSWR('/api/user', fetcher)를 호출하면 SWR은 요청을 하나만 전송하고 결과를 공유합니다. 데이터나 오류가 업데이트되면 두 컴포넌트가 함께 다시 렌더링됩니다.

이 중복 제거는 추가 구성 없이 dedupingInterval 기간(기본값 2000ms) 내에서 자동으로 이루어집니다.

refreshInterval: 5000은 5초마다 폴링합니다. refreshWhenHidden: false는 탭이 표시되지 않을 때 폴링을 중지합니다. shouldRetryOnError: false는 자동 재시도를 비활성화합니다. revalidateOnFocus: false는 포커스에 의해 실행되는 재검증을 비활성화합니다.

데이터 최신성 요구 사항에 맞게 옵션을 조합합니다. 대시보드에는 refreshInterval을 자주 사용하고, 정적 콘텐츠에는 revalidateOnFocus: false를 설정하는 경우가 많습니다.

페이지로 나뉜 데이터에는 키에 페이지 번호를 포함합니다: useSWR(['/api/items', page], fetcher). 페이지를 변경하면 해당 페이지의 데이터를 새로 가져오면서 이전 페이지는 캐시합니다.

SWR은 커서 기반 패턴이나 무한 스크롤 패턴을 위한 useSWRInfinite도 제공합니다. 이때 getKey 함수가 페이지 인덱스와 이전 페이지 데이터를 바탕으로 키를 만듭니다.

useSWR에 키로 null을 전달하면 어떻게 됩니까?

useSWR(key, fetcher)는 data, error, isLoading, isValidating을 반환합니다. null 키는 조건부 요청과 종속 요청에서 데이터 가져오기를 비활성화합니다. isLoading은 첫 번째 로딩을 나타내고 isValidating은 진행 중인 모든 요청을 나타냅니다. SWRConfig은 기본값을 중앙에서 관리하며 컴포넌트 간 요청 중복 제거는 자동으로 이루어집니다.

refreshInterval, revalidateOnFocus, shouldRetryOnError 같은 옵션을 사용하면 훅별 또는 전역 데이터 최신성 동작을 세밀하게 조정할 수 있습니다.