SWR 이란?
데이터 가져오기를 위한 React Hooks 이다.
SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다.
SWR 장점
단 한줄의 코드로 프로젝트 내의 데이터 가져오기 로직을 단순화할 수 있으며, 다음과 같은 놀라운 기능들을 바로 사용할 수 있다.
- 빠르고, 가볍고, 재사용 가능한 데이터 가져오기
- 내장된 캐시 및 요청 중복 제거
- 실시간 경험
- 전송 및 프로토콜에 구애받지 않음
- SSR / ISR / SSG support
- TypeScript 준비
- React Native
SWR, 데이터 가져오기
const {data, error, isValidating, mutate} = useSWR(key, fetcher, options)파라미터
- key : 요청을 위한 고유한 키 문자열(또는 함수 / 배열 / null)
- fetcher : (옵션)데이터를 가져오기 위한 함수를 반환하는 Promise
- options : (옵션)SWR hook 을 위한 옵션 객체
반환 값
- data : fetcher가 이행한 주어진 키에 대한 데이터
- error : fetcher가 던진 에러
- isValidating : 요청이나 갱신 로딩의 여부
- mutate(data?, shouldRevalidate?): 캐시 된 데이터를 뮤테이트하기 위한 함수
예시 코드
- useSWR 을 import 하여 사용한다.
- randomImgFetcher 는 swr의 param 으로 들어가는 fetcher 함수이다. 데이터를 요청하고 이를 반환한다.
- '/photos/random' 은 swr의 param 으로 들어가는 key이고 해당 키는 fetcher 함수의 url로 들어간다.
- 추가적인 option으로 revalidateIfStale, revalidateOnFocus, shouldRetryOnError 를 false 로 설정하였고 onSuccess 를 통해 promise가 성공한 이후 동작하는 코드를 작성하였다.
뮤테이션
갱신하기
useSWRConfig() hooks으로부터 mutate 함수를 얻을 수 있으며,
mutate(key) 를 호출하여 동일한 키를 사용하는 다른 SWR hook에게 갱신 메시지를 전역으로 브로드캐스팅할 수 있습니다.
예시
- 1번 이미지에서, useSWR의 반환값인 mutate 를 통해 갱신할 수 있지만, 해당 useSWR 에 param 으로 전달된 key('/photos/random') 를 사용하면 바로 사용할 수 있다.
전역 설정
SWRconfig 컨텍스트는 모든 SWR hooks에 대한 전역 설정을 제공합니다.
<SWRConfig value={options}>
<Component/>
</SWRConfig>예시
- 이미지 1번의 useSWR 에서 사용한 옵션들을 전역으로 사용하고 싶을 때, 즉 프로젝트의 모든 SWRHooks에 적용하고 싶을 때 사용한다.
전역 설정을 통한 에러 관리
컴포넌트 내에서 error 객체를 얻을 수 있으나 UI 에 토스트나 스낵바를 보여주는 것처럼, 에러를 전역으로 처리할 때 onError 이벤트를 사용할 수 있다.
<SWRConfig value={{
onError: (error, key) => {
if (error.status !== 403 && error.status !== 404) {
// Sentry로 에러를 보내거나,
// 알림 UI를 보여줄 수 있습니다.
}
}
}}>
<MyApp />
</SWRConfig>예시 코드
- SWRConfig 에서 onError 를 설정하여, SWRHooks에서 에러가 발생했을 때 처리하는 방식으로 전역으로 설정한다.
- 해당 코드의 경우 에러가 발생하면 toast 를 보여주는 방식이다.
데이터를 가져오기 위한 라이브러리로 CRUD 상황에선 어떻게 사용하는지,
전역 상태 관리 툴인 redux 또는 react context 와 함께 사용할 땐
어떤 식으로 코드를 작성해야하는지 더 공부해야한다.
생경하다.