react query vs. redux

G-NOTE·2022년 8월 31일

목록 보기

20/27

React에서 일반적으로 관리하는 상태

클라이언트 쪽 데이터 관리엔 용이하나, 서버 쪽 데이터 관리에 불편한 점이 많다.
서버에서 비동기적으로 받아오는 데이터를 처리하기 위해 redux-thunk 등을 사용해 비동기 처리 수행 후, 데이터를 redux store에 저장하여 각 컴포넌트에서 사용했다.
비동기 처리 수행 중 isLoading 등의 로딩 상태를 직접 선언하고 처리해야 한다.
redux-toolkit의 등장으로 redux boilerplate 양이 줄어들었음에도, 여전히 비동기 처리 시 반복되는 boilerplate 코드량이 많았다.
API 통신을 위한 규격화된 방식의 부재 : Redux는 API 통신 및 비동기 상태 관리 목적 라이브러리가 아니기 때문에 비동기 데이터를 관리하기 위한 코드를 개발자가 모두 결정하고 구현해야 했다. 즉, redux는 범용적으로 사용하는 전역 상태 관리 라이브러리였기 때문에 규격화된 비동기 데이터 관리 방식이 없어 협업이 복잡해질수록 데이터 관리가 까다로웠다.
EX. API 로딩 여부
- Boolean을 사용해서 관리
- IDLE | LOADING | SUCCESS | ERROR 등 상태를 세분화하여 관리

서버 상태 관리에 특화된 상태 관리 라이브러리로, 서버와 클라이언트 간 비동기 작업을 쉽게 할 수 있도록 돕는다.
staleTime, cacheTime 옵션 등으로 redux보다 쉽게 데이터 캐싱을 할 수 있다.
react query는 데이터가 fetch되는 동안 자체적으로 isLoading 등의 상태값, 메서드를 제공한다.
QueryClient를 활용해서 커스텀 훅을 만들 수 있다.
Redux에 비해 적은 boilerplate 코드
API 요청 수행을 위한 규격화된 방식 제공 : React Query는 React에서 비동기 데이터를 관리하기 위한 라이브러리로, API 요청 및 상태 관리를 위해 규격화된 방식을 제공하여, 개발자가 직접 처리방식을 지정하지 않고도 효율적으로 관리할 수 있다.
다양한 built-in 기능 제공으로 개발자가 직접 코드를 작성해야 하는 수고를 덜어준다.

클라이언트 사이드보다 서버 사이드 데이터 관리가 더 많을 때 유리하다.
- refetching 옵션들을 통해 서버 데이터를 동기화 가능
- useMutation을 사용할 때 defaultOptions에 onError를 추가하여 POST, PUT, DELETE 등의 API request 실패 시, redux보다 편하게 에러 메시지를 띄울 수 있다.

*react query와 전역 상태 관리 라이브러리를 쓰려면 recoil 추천

FE Developer