Redux-saga VS React-query

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

api 요청에 대한 상태관리

  • Redux
    • redux는 상태관리 라이브러리다. 비동기처리목적이 아니기 때문에 redux-saga ,redux-thunk 등 미들웨어를 사용해야한다.
    • 비동기 처리시 상태관리(isLoading, error, success)상황을 관리해야한다.
  • React-query

구조

  • 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실행
profile
👨‍🍳요리사의 "쿠킹" 스토리가 아닌 "코딩" 스토리💻

0개의 댓글