React Query vs SWR

최근 리덕스 대체제로 많은 라이브러리들이 언급되고 있는데

 

 React Query 와 SWR 에 대해서 비교

 

기본 개념

React Query 

React Query 는 리액트 애플리케이션에 서버 상태를 가져오고, 캐싱하고, 동기화, 업데이트 하는 것을 쉽게 해준다.

SWR

SWR 은 먼저 캐싱 된 데이터를 반환하고, 서버 데이터를 가져오는 요청을 보내고 마지막으로 최신 데이터를 제공하는 전략

 

1. Provider

SWR은 별도의 Provider 없이 컴포넌트에서 바로 사용 할 수 있지만, React-Query 는 Provider로 컴포넌트를 감싸줘야한다.

 

2. Fetcher

useSWR, useQuery 모두 두 번째 인자로 fetch 를 받는다.

SWR 은 useSWR 의 첫번째 인자로 fetch url 을 받고, url만 바꿔가며 fetch를 정해두고 사용 할 수있는데 React-Query 는 항상 두번째에 사용 할 fetch 를 넘겨줘야한다.

 

3. Status

SWR 은 isVaildating 을 이용해 상태를 표현하는 데 반해, React-Query 는 isLoading, isFetching 등을 통해 데이터의 상태를 보여준다.

 

4. Dev tools

SWR 은 Dev tools 가 없지만 React-Query 는 Dev tools 가 있습니다.

 

5. Garbage Collection

SWR 에서는 가비지 컬렉션에 대한 내용은 없으나, React-Query 문서에 따르면 query가 5분동안 비활성 상태라면 캐시가 되어진 모든 데이터들은 Garbage Collection 이 됩니다.

 

6. bundle size

react-query 12.9kb

SWR 4.1 kb

apollo-client 39.0kb

 

SWR 가 가장 용량이 작습니다.

 

결론

SWR 보다 React-Query 에 더 많은 기능이 있습니다. 이는 더 복잡한 프로젝트에 사용하기 적합하다고 생각 할 수 있습니다.