[SWR] useSWR 장점

https://swr.vercel.app/ko

현재 우리 프로젝트에서 쓰고있는 data fetch react hook.

도입되자마자 구현하느라, 공부해볼 시간이 없었다. 이참에 정리해보고자 한다.

---

장점

1. Cache

Stale-While-Revalidate 의 줄임말로 백그라운드에서 캐시를 revalidate(재검증) 하는 동안에 기존의 캐시 데이터를 화면에 보여준다.

그래서, 도중에 api가 에러를 반환하더라도 캐시된 데이터를 활용할 수 있다.

즉, 좋지않은 데이터로 인해 일어나는 불필요한 렌더링을 막아준다.

 

2. 중복제거

불필요한 api 호출을 막음

SWR은 전역캐시를 이용해 모든 컴포넌트 사이에 데이터를 저장하고 공유한다. 그러므로, 불필요한 네트워크 요청을 생략한다.

 

user 정보를 가져오는 hook

function useUser () {
  return useSWR('/api/user', fetcher)
}

useUser 로 가져온 값으로 데이터를 보여주는 컴포넌트

function Avatar () {
  const { data, error } = useUser()
 
  if (error) return <Error />
  if (!data) return <Spinner />
 
  return <img src={data.avatar_url} />
}

그리고 이 컴포넌트를 다섯번 호출하면?

function App () {
  return <>
    <Avatar />
    <Avatar />
    <Avatar />
    <Avatar />
    <Avatar />
  </>
}

api 를 다섯번 호출할까 ? -> NO

이들은 동일한 SWR 키를 가지고 있으므로 단 한번의 네트워크 요청만 발생한다.

 

3. 깊은 비교

SWR은 데이터 변경에 대해 깊이 비교합니다. swr이 주는 data값이 변경되지 않았다면 리렌더링을 야기하지 않습니다.

useSwr은 data, error, isLoading, isValidating 4개의 stateful한 값을 받을 수 있으며, 이 값들은 독립적으로 업데이트 됩니다.

function App () {
  const { data, error,　isLoading, isValidating } = useSWR('/api', fetcher)
  console.log(data, error, isLoading, isValidating)
  return null
}

// console.log(data, error, isLoading, isValidating)
undefined undefined true true  // => 가져오기 시작
undefined Error false false    // => 가져오기 종료, 에러 발생
undefined Error true true      // => 재시도 시작
Data undefined false false     // => 재시도 종료, 데이터 얻음

 

4. 자동갱신

원하는 시점에 맞추어 새로운 데이터를 갱신할 수 있다.

아래 swr options 으로 설정이 가능하다.

revalidateOnMount: 컴포넌트가 마운트되었을 때 자동 갱신 활성화 또는 비활성화
revalidateOnFocus = true: 창이 포커싱되었을 때 자동 갱신
revalidateOnReconnect = true: 브라우저가 네트워크 연결을 다시 얻었을 때 자동으로 갱신
refreshInterval = 0: 인터벌 폴링(기본적으로는 비활성화)
refreshWhenHidden = false: 창이 보이지 않을 때 폴링
refreshWhenOffline = false: 브라우저가 오프라인일 때 폴링
shouldRetryOnError = true: fetcher에 에러가 있을 때 재시도
dedupingInterval = 2000: 이 시간 범위내에 동일 키를 사용하는 요청 중복 제거
focusThrottleInterval = 5000: 이 시간 범위 동안 단 한 번만 갱신

---

출처

https://velog.io/@soryeongk/SWRBasic#1-swr-%EB%8B%88-%EB%AD%94%EB%8D%B0https://velog.io/@gadian88/SWR-React-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%B0%8F-%EC%BA%90%EC%8B%9C-%EA%B4%80%EB%A6%AC