react-query는 서버 상태를 다루는 라이브러리다.redux,mobx등은 클라이언트 상태를 다루는 라이브러리다.
즉, react-query는 전역 상태관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업을 쉽게 해주는 라이브러리다. 다만 react-query를 도입한다면 개발자가 전역적으로 관리해야하는 데이터는 매우 적을 것이다. 때문에 recoil이나 jotai같은 간소한 상태관리 라이브러리를 함께 사용하는 것도 좋은 방법이다.
예를 들면 과거 리액트 개발자들은 서버에서 데이터를 받아오는 작업을 리덕스에서 처리하기 위해 redux-thunk, redux-saga 등을 이용해서 비동기 작업을 수행하고 데이터를 리덕스 스토어에 저장한 뒤 그 데이터를 각 컴포넌트에서 사용했다.
react-query는 이 작업을 매우 간편하게 만들어주는데다가 데이터 캐싱을 아주 쉽게 해결할 수 있다. 쿼리에 staleTime: Infinity, cacheTime: Infinity 옵션만 추가하면 앱을 끄기 전까지 다시 fetch되지 않는 데이터로 만들 수 있다. 데이터가 처음 fetch되는 동안 isLoading 등의 상태를 직접 선언하고 조작할 필요도 없다. react-query에서 모든 상태값과 메서드를 제공하기 때문이다.
물론 이러한 서버 데이터와 관계없이 전역적으로 다뤄야 하는 데이터들이 있다. 예를 들면 theme: 'light' | 'dark'를 저장하고 있는 전역 데이터는 클라이언트에서만 다루는 데이터다. 이러한 데이터는 react-query에 임의로 저장하고 다루는 것이 아니라 컨텍스트나 전역 상태관리 라이브러리를 사용해서 핸들링 해야 한다.
현재 가장 추천하는 조합은 react-query + recoil 이다. context api가 가지고 있는 여러가지 이슈가 있기 때문에 전역 상태관리 라이브러리 하나는 사용을 해야 개발이 편한데, 성능 이슈 없이 간단하게 사용할 수 있기 때문에 recoil을 추천한다.
