SWR

- SWR이란

• 데이터를 가져오기 위한 React Hooks
• SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략
• 동일한 SWR 키를 사용한다면 요청은 중복 제거, 캐시, 공유되므로 단 한번의 요청만 API로 전송되어 네트워크 비용의 낭비가 없음

- install

• npm

npm i swr

• yarn

yarn add swr

- 형식

const { data, error, isLoading, isValidating, mutate } = useSWR(key, fetcher, options)

• key: 요청을 위한 고유한 키 문자열(또는 함수 / 배열 / null)
• fetcher: (option) 데이터를 가져오기 위한 함수를 반환하는 Promise
• options: (option) SWR hook을 위한 옵션 객체
  ➡️refresh 주기나 화면이 focus되었을 때 refetch시키려고 할 때 등 활용해볼 수 있음

- data: fetcher가 가져온 데이터 - error: fetcher가 던진 에러 - isLoading: 진행 중인 요청이 있고 "로드된 데이터"가 없는 경우 - isValidating: 요청이나 갱신 로딩의 여부 mutate(data?, options?): 캐시된 데이터를 뮤테이트하기 위한 함수 ➡️이미 useSWR로 한번 fetch된 캐시 데이터를 변경할 때 사용

- 예시코드

import useSWR from 'swr'
 
function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

swr공식문서