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