Today I Learned

Redux, React-Query. 왜 우리는 React Query를 사용하였는가

• react-query는 서버 상태를 다루는 라이브러리다.
• redux, mobx 등은 클라이언트 상태를 다루는 라이브러리다.

react-query 는 전역 상태관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업(데이터 Fetching, 캐싱, 동기화, 서버 데이터 업데이트)을 쉽게 해주는 라이브러리다.
다만 react-query를 도입한다면 개발자가 전역적으로 관리해야하는 데이터는 매우 적을 것이다.
때문에 recoil 이나 jotai같은 간소한 상태관리 라이브러리를 함께 사용하는 것도 좋은 방법이다.

현재 가장 추천하는 조합은 react-query + recoil이다.

Redux의 문제점

Redux에서 서버 상태를 관리하기 위해서는 Redux-saga/Redux-thunk 등 비동기 처리를 위한 추가 라이브러리 를 설치해야 합니다.
또한 서버의 응답을 Store에 저장할 필요가 없는 상황에서도 구조화를 위해 Action Types, Actions, Reducer를 만들어야 하고, 불필요한 Action 호출, 캐싱 처리 및 관리 문제 등이 생기게 됩니다.

결국 서버 데이터를 위한 로직이 과도하게 커지고, Redux를 활용하기 위한 보일러 플레이트가 비대해지는 것이죠.

이때 개발자들은 과연 Redux가 상태 관리라는 본연의 역할에 충실하고 있는 것일까? 라는 의문을 갖게 되고, 서버 상태를 관리하는 React Query가 등장함으로써 클라이언트와 서버의 데이터를 분리할 수 있게 되었습니다.

React Query의 장점

• Redux에 비해 보일러 플레이트 (변화없이 여러 군데에서 반복되는 코드) 가 적어 프로젝트 구조가 단순해집니다.
• 캐싱 처리가 간단해집니다.
• 다양한 [옵션](https://tanstack.com/query/v4/docs/react/reference/useQuery)을 사용할 수 있습니다.
  (Redux에서는 직접 로직을 작성해야 했습니다.)
• onSuccess/onError 핸들링을 간편하게 처리할 수 있습니다.