SWR (데이터 가져오기를 위한 React Hooks)

SWR 이란?

stable-while-revalidate 의 약자,

 

해석) 캐시가 가지고 있는 stable response 이 유효한지 백그라운드에서 재검증 하는 동안 해당 stable response를 즉시 리턴하여 네트워크 지연시간을 숨기는 전략

캐싱 된 데이터가 있으면 먼저 가져오고, 서버 데이터를 가져온 후 마지막으로 최신의 데이터를 리턴한다. 

 

SWR 의 특징

1. 전역상태 관리 기능 (리덕스 대체 가능)

 

 

SWR 사용 예시로 리덕스 대체 가능성을 가장 많이 언급하고 있다.

 

 

이유는 기본적인 리덕스는 액션타입 정의부터 액션함수, 리듀서 그리고 비동기 로직에 필요한 미들웨어 thunk액션 또는 saga 함수 등 방대한 작업량과 다소 반복적인 작업이 있을 수 있다.

 

 

이런 문제를 SWR은 아래 코드로 줄여줄 수 있다.

const fetcher = url => fetch(url).then(r => r.json());

function App() {
  const { data, error } = useSWR('/api/data', fetcher);
  // ...
}

useSWR 의 첫번째 인자로 key, 두번째 인자로 fetch 를 받는데, 첫번째 key가 다시 fetch의 첫번째 인자로 들어가서 API endpoint 로 사용 된다.

 

 

return 된 data 는 같은 key를 요청에 대해 자동으로 중복제거, 캐시, 공유되어 api 요청 하나만으로 가능하다.

 

 

자세한 사용 방법은 공식문서

https://swr.vercel.app/ko/docs/getting-started

시작하기 – SWR

 

2. UX 향상


SWR 은 매번 요청을 지속적이고 자동적으로 보내지만 데이터를 받는 것이 요청 이후 응답을 받는 구조가 아니다.

 

그럼?

먼저 캐싱 된 데이터를 보여주고 swr은 내부적으로 다시 서버에서 불러온다.
따라서 더 빨리 컴포넌트에 데이터를 뿌려 줄 수 있어서 사용자 입장에서는 빠르다는 인식을 줄 수 있다.

 

3. Mutation

 

Mutation 

 

사용자가 정보를 수정 할 경우 SWR이 알아서 데이터를 갱신하기를 기다리기 보다는 수정 즉시 화면에 변경 된 데이터가 보여져야한다.

 

Mutation 함수가 호출 되면 해당 상태를 즉시 다시 get하고 데이터를 갱신한다.

 

mutate(key)를 호출하여 동일한 키를 사용하는 다른 SWR hook*에게 갱신 메시지를 전역으로 브로드캐스팅할 수 있습니다.

 

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

뮤테이션 – SWR