useSWR 정리

슬랙 클론 코딩을 진행하다가 아직 개념이 잘 이해가 되지 않아서 ...

 

데이터 fetch 를 위한 훅

SWR (Stale While Revalidate)

캐시를 재검증하는 동안 기존에 캐시된 데이터를 사용하게 하는 기술

캐시된 데이터를 활용할 수 있게 하여 데이터를 계속 호출하는데 시간을 쓰지 않고 캐시된 데이터를 이용하여 효율적으로 동작한다.

 

그리고 전역 상태관리에도 유용

 

react-query 라이브러리도 비슷한 기능을 수행한다고 함

 

axios는 필요할 때마다 api를 호출해야 데이터가 갱신되는데 반해, SWR은 포커싱을 다른 곳으로 옮겼다가 돌아오더라도 자동으로 재검증을 통하여 갱신을 해준다는 장점이 있다고 한다. 그래서 설정에 따라 원하는 순간과 주기로 재검증 하는 것도 가능하다고 함

 

useSWR은 useEffect처럼 동작하므로 useEffect 하위에선 사용이 불가하다고 한다.

 

const { data, error } = useSWR('api', fetcher);

데이터를 fetch 해주는 함수므로 fetcher 에는 args로 주소를 받아서 axios.get 처리를 해준다.

 

useSWR의 반환값인 then((response) => response.data)는 data,

error 는 fetcher에서 처리된 값에 의해 결정된다.

 

error를 좀더 상세히 보기 위해선

const fetcher = async url => {
  const res = await fetch(url);

  if (!res.ok) {
    const error = new Error("[FAIL] fetch data");
    //error.info에는 오류 객체를 담습니다.
    error.info = await res.json();
    //error.status에는 상태코드를 담습니다.
    error.status = res.status;
    throw error;
  }
  
  return res.json();
}

커스텀해준다.

 

 

추가로 useSWR 의 호출 빈도나 특정 키에선 재시도를 하지 않는 등의 처리는

3번째 파라미터(선택)에다가 onErrorRetry 속성으로 설정해줄 수 있다.

const { data, error } = useSWR('/api/user', fetcher, {
  onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
    // 상태코드 404 not Found에서는 더이상 시도하지 않습니다.
    if (error.status === 404) return;

    // 특정 key에서 재시도를 하지 않습니다.
    if (key === '/api/user') return;

    // 최대 10번까지만 시도합니다.
    if (retryCount >= 10) return;

    // 5초의 간격을 두고 재시도합니다.
    setTimeout(() => revalidate({ retryCount }), 5000);
  }
})