SWR 활용하기 with React, TypeScript

** 본 게시글은 ZeroCho의 Sleact 강의를 학습하며 정리한 내용을 포함하고 있습니다.

SWR

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

Stale-While-Revalidate의 약자로, React 컴포넌트에서 사용할 수 있는 훅 형태의 SWR 라이브러리다.

간편하게 데이터를 가져오고, 캐시하고, 최신 데이터를 가져온다.

설치

$ npm i swr

fetcher 함수 작성

JSON을 사용하는 일반적인 RESTful API라면 fetch 함수를 작성해야 한다.

// @utils/fetcher.ts

const fetcher = (url) => axios.get(url).then((res) => res.data);

• fetcher가 return한 datasms useSWR의 반환값 data에 들어간다.

 

💡 프, 백 도메인이 다르면 쿠키를 공유할 수 없는 문제가 발생한다.
백엔드에서 쿠키를 생성해줄수도, 프론트에서 쿠키를 보내줄 수도 없다.
ex) 로그인에 성공해도 유저 정보를 불러오지 못하는 상황 발생

// @utils/fetcher.ts
const fetcher = (url: string) =>
  axios.get(url, { withCredentials: true }).then((res) => res.data);

fetcher 함수에 withCredentials 옵션을 추가한다. (post의 경우 세번째 인자)

 

import useSWR

useSWR을 import 한 뒤 사용하면 된다.

import axios from 'axios'
 
const fetcher = url => axios.get(url).then(res => res.data)
 
function App () {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}

• fetcher : 요청을 어떻게 처리할 것인지에 대한 로직
  • 요청을 보낼 주소가 fetcher 함수의 매개변수로 넘어간다.
• error : 요청 실패 시 error에 대한 값이 담김
• isLoading : data의 값이 존재하지 않는 상태 → true

 

SWR 설정

현재 페이지에서는 로그인 후 SWR을 호출하여 유저 정보를 불러오고 싶다.

원하는 시점에 호출하기 - mutate

💡 mutate vs revalidate
revalidate는 데이터를 재요청 하는 것이다.
불필요한 요청을 줄이기 위해서는 mutate를 사용하는 것이 더 좋다.
mutate는 두번째 인자로 받은 데이터를 swr의 최신 값으로 갱신한다.

• 강의에서는 revalidate를 사용하지만 현재 revalidate는 더이상 제공하지 않는 것 같다.
• mutate + 인자들의 조합으로 데이터를 최신화 해야 한다.

const { data, error, mutate } = useSWR(url, fetcher);

...
axios
	.post()
	.then((res) => {
		// 데이터를 새로 요청하지 않고 요청 값으로 받아온 데이터를 최신화 한다.
    mutate(res.data);
	})

• 아래와 같이 전역으로 꺼내 쓰는 경우에는 mutate할 요청의 url을 첫번째 인자로 받는다.

const useSWR, { mutate } from 'swr';

...
axios
	.post()
	.then((res) => {
		// 데이터를 새로 요청하지 않고 요청 값으로 받아온 데이터를 최신화 한다.
    mutate(url, res.data);
	})

 

Optimistic UI

• OptimisticData 옵션으로 캐시를 예상 데이터로 미리 업데이트 한다.
  • ex) 좋아요 버튼 눌렀을 때 일단 true로 변경하고 이후에 서버에 요청하는 방식 → 사용자 경험

// 데이터를 새로 요청하지 않고 요청 값으로 받아온 데이터를 최신화 한다.
  mutate(res.data, {
    optimisticData: res.data, // 캐시를 예상 데이터로 미리 업데이트
    revalidate: true, // 서버의 최신 데이터를 가져와 캐시 동기화
    rollbackOnError: true, // 에러 발생 시에 캐시 롤백
  });

 

SWR 호출 간격 설정하기 - dedupingInterval 옵션

const { data, mutate } = useSWR("/api/users", fetcher, {
    dedupingInterval: 100000,
  });

아래의 링크에서 더 많은 options들을 확인할 수 있다.

API – SWR