react-query가 redux같은 전역 상태관리 라이브러리를 대체할 수 있을까 | nana.log
react-query는 서버 상태를 다루는 라이브러리다.redux, mobx 등은 클라이언트 상태를 다루는 라이브러리다.react-query
는 전역 상태관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업(데이터 Fetching, 캐싱, 동기화, 서버 데이터 업데이트)을 쉽게 해주는 라이브러리다. 다만 react-query
를 도입한다면 개발자가 전역적으로 관리해야하는 데이터는 매우 적을 것이다. 때문에 recoil
이나 jotai같은 간소한 상태관리 라이브러리를 함께 사용하는 것도 좋은 방법이다.
현재 가장 추천하는 조합은 react-query + recoil
이다. context api가 가지고 있는 여러가지 이슈가 있기 때문에 전역 상태관리 라이브러리 하나는 사용을 해야 개발이 편한데, 성능 이슈 없이 간단하게 사용할 수 있기 때문에 recoil
을 추천한다.
Redux에서 서버 상태를 관리하기 위해서는 Redux-saga/Redux-thunk 등 비동기 처리를 위한 추가 라이브러리
를 설치해야 합니다. 또한 서버의 응답을 Store에 저장할 필요가 없는 상황에서도 구조화를 위해 Action Types, Actions, Reducer를 만들어야 하고, 불필요한 Action 호출, 캐싱 처리 및 관리 문제 등이 생기게 됩니다.
결국 서버 데이터를 위한 로직이 과도하게 커지고, Redux를 활용하기 위한 보일러 플레이트가 비대해지는 것이죠.
이때 개발자들은 과연 Redux가 상태 관리라는 본연의 역할에 충실하고 있는 것일까? 라는 의문을 갖게 되고, 서버 상태를 관리하는 React Query가 등장함으로써 클라이언트와 서버의 데이터를 분리할 수 있게 되었습니다.
React Query로 서버 데이터를 관리하더라도, 클라이언트 측에서 전역으로 관리해야 할 데이터(
Global state
)는 존재할 것입니다.
이럴 때 추가로 Redux, Recoil 등을 사용하면 상태 관리 라이브러리가 본연의 역할에만 집중하도록 할 수 있습니다.