[SWR] SWR 시작하기

SWR 이란?

SWR 이라는 이름은 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래
SWR은 먼저 캐시로부터 데이터를 반환한 후, fetch 요청을하고, 최종적으로 데이터를 가져온는 전략이다.

• 빠르고, 가볍고, 재사용 가능
• 내장된 캐시로 요청 중복 제거

SWR 시작하기

설치

// yarn으로 설치
yarn add swr

// npm으로 설치
npm i swr

useSWR 기본 사용법

import useSWR from 'swr';

const fetcher = 

const Profile = () => {
  // useSWR(key값, 패치(axios 또는 네이티브 fetch) 함수) => data와 error 반환
	const { data, error } = useSWR('/api/test', fetcher);
  
  	if (error) return <div>failed to load</div>
  	if (!data) return <div>lading...</div>
  
  	return <div>data fetch test : {data}</div>
}

API 옵션

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

파라미터

• key : 요청을 위한 고유키
• fetcher(선택) : 데이터를 가져오기 위한 함수를 반환하는 Promise
• options(선택) : SWR hook을 위한 옵션 객체

반환 값

• data : fetcher로 받아온 key에 대한 데이터
• error : fetcher에서 발생한 에러
• isValidating : 요청이나 갱신 로딩 여부
• mutate() : 캐시 된 데이터를 뮤테이트(갱신)하기 위한 함수

조건부 데이터 가져오기

• SWR은 null을 사용하거나 함수를 key로 전달하여 데이터를 조건부로 가져옴(함수가 falsy 값을 반환하면 요청을 시작하지 않는다.)

// 조건부
const { data } = useSWR(shouldFetch ? '/api/data' : null, fetcher)

// falsy값 반환
const { data } = useSWR(() => shouldFecth ? '/api/data' : null, fetcher)

// 특정 데이터값이 존재하지 않을때 에러 반환
const { data } = useSWR(() => '/api/data?id=' + user.id, fetcher)

// carData는 userData에 의존적으로 데이터를 불러옴
const { userData } = useSWR('/api/user');
const { carData } = useSWR('/api/car?userId=' + userData.id);

인자

• 기본적으로 useSWR의 파라미터 key는 인자로써 fetcher에 전달됨

// 아래 3가지 표현은 동일한 결과를 반환함
useSWR('/api/user', () => fetcher('/api/user'));
useSWR('/api/user', (url) => fetcher(url));
useSWR('/api/user', fetcher);

• 다중 인자 전달

useSWR(['/api/user', token], (url, token) =. fetchWithToken(url, token));
useSWR(['/api/user', token], fetchWithToken);