Library] SWR

SWR(Stale-While-Revalidate)

swr은 데이터를 가져오기 위한 React hook 라이브러리로 보시면 됩니다.

서버에 GET요청을 하고, 결과를 받아와 간편하게 사용할 수 있습니다.

단순히 axios만 사용하는 것보다 효율이 좋다고 보시면 됩니다.

 

대표적인 특징으로

• 빠르고, 가볍고, 재사용이 가능한 데이터를 가져온다.
• 내장된 캐시 및 요청 중복을 제거
• 실시간으로 동작

3가지를 볼 수 있을 듯합니다.

(저는 캐시 데이터를 사용하고, 중복으로 요청을 안 한다는 게 큰 장점으로 생각합니다.)

 

공식 홈페이지는 아래와 같습니다.

https://swr.vercel.app/ko

 

 

---

 

 

설치

npm i swr

yarn add swr

 

 

---

 

 

기본 구성

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

 

parameter

• key : 식별하기 위한 문자열로 보통 URL.
• fetcher : 함수에 key값을 첫 번째 파라미터로 전달.
  promise를 리턴하는 모든 함수가 올 수 있으며, fetch나 axios 등 사용 가능하며, 반환값이 data에 해당
• options : 다양한 옵션을 통해 여러 가지 기능을 추가 삭제 할 수 있음. 아래 링크에 자세히 기재

https://swr.vercel.app/ko/docs/api

 

 

---

 

 

return

• data : fetcher에서 성공적으로 통신을 했을 때 리턴되는 값
• error : fetcher에서 에러가 발생했을 때 리턴되는 값.
• isLoading : 통신 중인지 확인.
• isValidating : 요청이나 갱신 여부.
• mutate : useSWR로 선언한 key의 데이터를 최신화할 것인지를 컨트롤할 수 있게 해주는 역할

 

 

---

 

 

error

앞에서 말했던 것처럼 fetcher에서 에러가 발생하게 되면, error로 반환하게 됩니다.

const fetcher = async url => {
  const res = await axios.get(url)
 
  if (!res.ok) {
    const error = new Error('An error occurred while fetching the data.')

    error.info = await res.json()
    error.status = res.status
    throw error
  }
 
  return res.json()
}

 

axios.get을 통해 데이터를 로드했고,

ok로 떨어지지 않았을 경우 new Error로 에러 생성 후, status나 info를 파싱 하는 부분입니다.

res.ok를 안보고, try catch 문으로 에러 잡아도 상관없습니다.

 

useSWR('/api/user', fetcher, {
  onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
    // 404에서 재시도 안함
    if (error.status === 404) return
 
    // 특정 키에 대해 재시도 안함
    if (key === '/api/user') return
 
    // 10번까지만 재시도함
    if (retryCount >= 10) return
 
    // 5초 후에 재시도
    setTimeout(() => revalidate({ retryCount }), 5000)
  }
})

 

에러 났을 때 onErrorRetry 옵션을 추가해서 여러 가지 옵션을 줄 수 있습니다.

 

isLoading & isValidating

isLoading과 isValidating은 서로 다릅니다.

• isLoading은 진행 중인 요청이 있고, 아직 데이터가 로드되지 않은 상태에서 true
• isValidating은 데이터 로드 여부와 상관없이 진행 중인 요청이 있을 때 true

이렇게 구분할 수 있는데,

간단히 처음 데이터가 없을 때는 둘 다 true인 상태이고, 데이터 갱신될 때는 isValidating만 true라고 보면 됩니다.

공홈에 있는 동작

 

---

 

 

사용법

import useSWR from "swr";

function Profile() {
  const { data, error, isLoading } = useSWR("/api/user", fetcher, options);

  if (error) return <div>failed</div>;
  if (isLoading) return <div>loading</div>;
  return <div>{data.name}</div>;
}

// fetcher.js

import axios from 'axios';

const fetcher = (url: string) => {
  return axios.get(url, { withCredentials: true, })
      .then((res) =>  res.data);
};

export default fetcher;

 

간단하게 user정보를 가져온다고 생각해 봅시다.

key값으로 들어간 url은 '/api/user'가 되고,

fetcher는 따로 정의해 두었고 key값이 fetcher의 인자로 전달될 것입니다.

그 후 axios.get을 통해 데이터를 가져오게 됩니다.

 

통신이 끝나게  되면, 리턴된 data는 로컬에 저장되게 되고, 이 data는 별도로 요청이 없는 한 캐싱되어 데이터가 유지될 것입니다.

해당하는 data를 다시 부르게 되면 캐싱된 data가 재사용됩니다.

 

 

---

 

 

 

다음 게시글에서 mutate를 포함해 좀 더 다양한 부분을 작성해 보도록 하겠습니다.