[React] SWR이 뭘까?

안녕하세요. 오늘은 SWR에 대해 소개해드리려 합니다!

---

SWR 이란?

SWR은 vercel에서 만든 fetch를 위한 커스텀 훅 npm 모듈입니다.

 

SWR 용법

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

 

파라미터

- key: 요청을 위한 문자열
- fetcher: 데이터를 가져오기 위한 함수를 반환하는 Promise

- options: SWR hook을 위 객체

 

반환 값

- data: fetcher가 이행한 주어진 키에 대한 데이터
- error: fetcher가 던진 에러
- isValidating: 요청, 갱신 로딩의 여부
- mutate: 캐시 된 데이터를 뮤테이트하기 위한 함수

예시

const {data, error} = useSWR('http://localhost:3000/api/users', fetcher);

if(error) return <div>에러발생</div>
if(!data) return <div>로딩중..</div>
return <div>{data}</div>

 

useSWR은 첫번째 인자로 key, 두 번째 인자로 fetch 함수를 받습니다.

첫 번째 인자는 두 번째 함수의 첫 번째 인자로 전달됩니다.

fetch 함수가 데이터를 로드하면 해당 응답이 data로 세팅되고 오류 발생 시 error에 세팅됩니다.

---

이렇게 SWR에 대해 알아보았습니다! 감사합니다.