[React] 리액트 상태관리도구 SWR

SWR이란?

SWR 은 stale-while-revalidate 을 의미하며,

캐시에서 먼저 데이터를 반환한 다음에 요청을 보내고 마지막으로 최신 데이터를 가져온다.

즉, 리액트 훅을 사용할 때 데이터를 가져오기 위한 라이브러리

 

 

 

설치

yarn add swr

시작

 

JSON 데이터를 사용하는 일반적인 RESTful API라면 먼저 네이티브 fetch의 단순한 래퍼인 fetcher 함수를 생성해주어야한다.

import axios from 'axios';

const fetcher = (url: string) => axios.get(url).then((response) => response.data);

export default fetcher;

json데이터는 아래와 같다 

const fetcher = (...args) => fetch(...args).then(res => res.json())

 

 

그 다음, useSWR을 임포트하고 함수 컴포넌트 내에서 사용하여 시작한다.

import useSWR from 'swr'

function Profile () {
  const { data, error } = useSWR('/api/user/123', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  // 데이터 렌더링
  return <div>hello {data.name}!</div>
}

useSWR의 매개변수로는 url주소와 함수(fetcher)를 넘겨준다. 그다음 인자로는 추가적인 옵션을 넣어주는 자리이다.

그리고 첫번째 인자자리에는 꼭 url 정보만 넘겨야 하는것은 아니다 특정 키워드로 데이터를 저장하고 불러올수 있어서 전역상태관리 도구로 이용할수있다.

 

 

재사용

function useUser (id) {
  const { data, error } = useSWR(`/api/user/${id}`, fetcher)

  return {
    user: data,
    isLoading: !error && !data,
    isError: error
  }

 

컴포넌트에서 불러오기

function Avatar ({ id }) {
  const { user, isLoading, isError } = useUser(id)

  if (isLoading) return <Spinner />
  if (isError) return <Error />
  return <img src={user.avatar} />
}

 

개발하면서 더 공부해보기.. 

 

확실한건 useEffect 를 안쓰고 변수로 데이터를 불러올 수 있다는 것