Redux-saga VS React-query

Redux를 사용하며 구조가 복잡하고 간단한 api에도 많은 공수가 들어가 불편함을 느꼈었다. 
그래서 다른 라이브러리를 찾던중 React-query를 발견 하였고 새로운 프로젝트에 적용했다. 
어떤 부분이 Redux 보다 React-query가 매력적이었던 부분을 정리해 보자. 

api 요청에 대한 상태관리

• Redux
  • redux는 상태관리 라이브러리다. 비동기처리목적이 아니기 때문에 redux-saga ,redux-thunk 등 미들웨어를 사용해야한다.
  • 비동기 처리시 상태관리(isLoading, error, success)상황을 관리해야한다.
• React-query
  • 상태관리를 기본옵션으로 제공한다.(https://react-query-v3.tanstack.com/reference/useQuery)

구조

• Redux
  • api 추가시 마다 Action , reducer , saga 를 구현해야한다.
  • saga에서 다른 saga에 dependency가 있고 이 구조가 복잡해지면 error를 찾기위해 연관되어 있는 saga를 찾아봐야한다.
• React-query
  • 각 api가 Query로 구성이되고 서로의 dependency는 사용하는 component 내에서 혹은 custom hooks에서 전달받고 갱신된다.
  • query key를 통해 직관적인 관리가 가능하다.

CSR , SSR 관리

• Redux + Redux-saga
  • CSR , SSR 을 전부 Redux로 관리하여 직관적이지 않다.
• Recoil + React-query
  • CSR은 Recoil로 SSR은 React-query로 관리하여 직관적이다.

Error 핸들링

• Redux
  • error 발생시 상태관리(isLoading, error, success)하는곳에서 error를 저장하고 갱신으로 인한 re-render가 되고 onError 실행
• React-query
  • error 발생시 바로 onError실행