230917 React: react-query 와 redux-tookit

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

지난 이커머스 프로젝트에서 react-query 와 redux-tookit을 사용했었다. 둘 다 상태관리가 가능하지만  
react-query는 데이터를 캐싱하는 역할로 사용을 했었고 redux-tookit은 전역(글로벌) 상태관리하는 역할로 사용했었다.
프로젝트를 진행할 때 두 라이브러리의 역할을 왜 분리해서 진행을 했었는지를 기록해두기 위해 react-query 와 redux-tookit의 역할, 특징 그리고 장점이 어떨 때 극대화 되는지를 적어두려 한다.

---

react-query

react-query 는 주로 데이터 요청, 캐싱, 비동기 처리, 서버 상태 관리와 같은 작업에 특화되어 있으며, 개발자가 데이터 요청 및 관리를 편리하게 처리할 수 있다. 또한 TypeScript와의 통합이 용이하며, DevTools로 데이터 흐름을 모니터링하기 쉽다. React Query는 서버에서 필요한 데이터를 요청하고 캐싱을 관리하는 데 매우 강력한 도구다.

redux-tookit

redux-tookit은 중앙 집중식 상태 관리를 주요 목표로 하는 라이브러리로, 상태 관리와 비동기 처리를 함께 다룰 수 있다. redux는 복잡한 애플리케이션에서 상태 변화를 예측 가능하게 만들어주며, 커스터마이징이 용이하고 다양한 미들웨어를 사용할 수 있다. redux-tookit은 서버 상태 관리와 페이징과 같은 추가 기능을 자동으로 처리하지 않지만, redux를 사용하여 이러한 기능을 구현하는 데 확장성이 높다.

아래 표로 한 번에 보면 각각 특징이 보인다.

특징/역할	react-query	redux-tookit
데이터 요청 및 캐싱	API 데이터 요청 및 응답 자동 처리 및 캐싱 지원	데이터 캐싱 X 요청과 응답 관리 X
상태 관리 및 업데이트	서버로부터 받은 데이터를 컴포넌트의 로컬 상태로 쉽게 저장 및 업데이트	Redux Store를 사용해 중앙 집중식 상태 관리 지원
비동기 요청 및 에러 처리	비동기 데이터 요청 처리 및 요청 중 발생한 에러처리	Redux Thunk 또는 Redux Saga와 함께 비동기 액션을 처리하고 에러를 관리
DevTools 지원	React Query DevTools를 통해 개발 도구에서 데이터 요청 및 캐싱 모니터링 가능	Redux DevTools를 사용하여 액션 및 상태 변화를 모니터링할 수 있습니다.
정규화 및 데이터 관리	데이터 자동 정규화 수행 O, 데이터 구조 관리 O	정규화 자동 수행 X, 개발자가 직접 상태 구조를 설계 해야함
미들웨어 및 미들웨어 확장성	미들웨어를 확장하기 쉽고, 다양한 미들웨어 플러그인을 제공	다양한 미들웨어를 지원, 커스텀 미들웨어를 만들기 쉬움
서버 상태 및 페이징 관리	서버 상태 관리 및 페이징을 지원, 서버에서 필요한 데이터를 요청	서버 상태 관리 및 페이징을 자동 처리 X
TypeScript 지원	TypeScript를 지원, 데이터 요청 및 응답의 유형을 쉽게 정의 가능	TypeScript를 지원, 타입 정의를 통해 강력한 타입 안정성을 제공

이렇게 표로 정리를 해보니 react-query는 주로 데이터 요청과 캐싱에 중점을 두며, redux-tookit은 상태 관리의 중앙 집중화 및 상태 업데이트를 관리하는 데 사용되었던 것이 맞고, 이커머스 프로젝트의 요구사항과 복잡성에 따라 적절히 혼합해 진행했었다고 판단된다. 프로젝트 할 당시엔 깊게 이해하지 못하고 적용하기 바빴기 때문에 각 라이브러리의 핵심 역할만 이해하고 기능 구현에 집중 했었다. 이제는 각각의 상세한 역할들을 알았으니 다음 프로젝트에선 혼합해서 하게될지, 한 개의 라이브러리로만 진행을 할지 결정할 수 있는 판단력이 +1 된 것 같다.