서론

지난 주 회의에서 SWR을 도입할 것을 건의했는데요, 그래서 SWR의 정의, 필요성, 용법 등을 문서로 정리해봤습니다.

우리 프로젝트에 녹여내 설명한 것도 있으니 봐주시면 좋을 것 같습니다. SWR을 사용하면서 많은 도움이 되기를 바랍니다.

                                                                                            - 기홍

SWR이란?

• Vercel에서 만든 데이터 fetching을 위한 리액트 훅
• Axios를 완전히 대체하는 기술은 아니다. 데이터 fetch, 즉 GET에 특화된 라이브러리라고 할 수 있다. 그 외 POST, PUT 등은 axios를 그대로 사용할 예정이다.

왜 필요한가

1. CSR에서 데이터 fetching 로직 단순화

아래는 우리 프로젝트의 유저 정보 조회 API이다.

// 기존 방식
const [userInfo, setUserInfo] = useState();
  useEffect(() => {
    (async () => {
      const data = await userAPI.getUserInfo(Number(id)).then((res) => res.data.data);
      setUserInfo(data);
    })();
  }, []);

// SWR 사용 
const { data: userInfo } = useSWR(`/api/v1/users/${id}/info`);

훨씬 명확하고 간단하며, 선언적임을 알 수 있다. 클린코드 만세

2. 캐싱 기반 데이터 전역 관리

useSWR('/api/signin', Fetcher)를 호출했다면 무슨 일이 일어나는가?