Redux의 한계를 넘어서: SWR과 React Query로 Server State 관리하기

기존 Redux에서 Server State를 관리할 때 redux-thunk나 redux-saga를 사용해야 하는 번거로움과 코드 장황함, Global State와 Server State의 관심사 분리 실패 문제를 지적한다. 이를 해결하기 위해 선언적 프로그래밍이 가능한 SWR과 React Query를 소개하며, 두 라이브러리의 사용법을 비교한다.

핵심 기능 비교

1. 기본 사용법: SWR은 useSWR, React Query는 useQuery 훅을 사용하며, key와 fetcher 함수를 인자로 받는다. React Query는 key 배열에서 object와 array의 순서 처리 방식에 차이가 있다.
2. 조건부 요청: SWR은 key가 null이거나 falsy 값을 반환할 때 fetch를 멈추며, React Query는 enabled 옵션을 통해 제어한다.
3. 데이터 재조회(Refetch): SWR은 mutate 함수를, React Query는 invalidateQueries 함수를 사용하여 특정 key의 데이터를 invalid 상태로 만들고 refetch를 트리거한다.
4. 직접 데이터 업데이트: refetch 없이 데이터를 변경할 때 SWR은 mutate에 데이터를 전달하고, React Query는 setQueryData를 사용한다.
5. Refetch 옵션: 두 라이브러리 모두 refetch 주기, 포커스 시 refetch 등 공통적인 옵션을 지원하며, React Query는 predicate를 활용한 세밀한 쿼리 무효화와 Devtools를 추가로 제공한다.