개념
SWR은 vercel에서 제작한 모듈이며, 데이터를 가져올 때 쓰인다.
vercel의 SWR 공식문서 "SWR"이라는 이름은 HTTP RFC 5861(opens in a new tab)에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다.
SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.그리고 UI는 항상 빠르고 반응적입니다.
장점
단 한 줄의 코드로 프로젝트 내의 데이터 가져오기 로직을 단순화할 수 있다.
- 빠르고, 가볍고, 재사용 가능한 데이터 가져오기
- 내장된 캐시 및 요청 중복 제거
- 실시간 경험
SWR은 더 나은 경험을 구축할 수 있도록 속도, 정확성, 안정성의 모든 측면을 다룹니다.
- 빠른 페이지 네비게이션
- 인터벌 폴링
- 데이터 의존성
주의할 점
useSWR 자체로 useEffect처럼 동작하기 때문에 useEffect 하위에서는 사용할 수 없다.
npm trends 비교
2020년부터 React Query 나 SWR 와 같은 data fetching 라이브러리들이 인기를 끌고 있다. (risingstars)
swr은 react-query와 기능이 비슷하여 많이 비교된다. 그런데 각각의 장점이 있기 때문에 개인의 선호도에 따라 선택하여 사용하면 될듯하다.
→ 데이터를 가져와서 쓰인 것 중 axios가 존재한다. axios는 필요할 때마다 api를 호출해야 데이터가 갱신되었다. SWR은 포커싱을 다른 곳으로 옮겼다가 돌아오기만해도 자동으로 재검증을 통해 업데이트를 해준다는 장점이 있다.
SWR 사용하기
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>
}useSWR hook은 key 문자열과 fetcher 함수를 받는다.
const { data, error } = useSWR(key, fetcher);
const fetcher = (...args) => fetch(...args).then(res => res.json());
- key : 데이터의 고유한 식별이며(일반적으로 요청을 보낼 API URL), fetcher로 전달된다.
- fetcher : 데이터를 반환하는 어떠한 비동기 함수된다. 네이티브 fetch 또는 Axios와 같은 도구를 사용할 수 있다.
요청의 상태에 기반한 data와 error를 반환하게 된다.
- data : 요청에 오류가 없는 경우 가져온 데이터를 말한다.
- error : 요청에 오류가 있을시에 반환할 내용을 의미한다. fetch 프로미스가 거부될 때 정의되게 된다.
🔗 참고
https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/
