리덕스를 사용하는 이유와 그 사용법

리액트쿼리가 리덕스같은 전역 상태관리 라이브러리를 대체할 수있을까 ?

react-query는 서버상태를 다루는 라이브러리다.

reudx, mobx 등은 클라이언트 상태를 다루는 라이브러리다. 

 

즉, react-query는 전역 상태관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업을 쉽게 해주는 라이브러리다, 다만 reat-query를 도입한다면 개발자가 전역적으로 관리해야하는데 데이터는 매우 적을 것이다. 때문에 recoil이나 jotai같은 간소한 상태관리 라이브러리를 함께 사용하는 것도 좋은 방법이다.

예를 들면 과거 리액트 개발자들은 서버에서 데이터를 받아오는 작업을 리덕스에서 처리하기 위해 redux-thunk, redux-saga 등을 이용해서 비동기 작업을 수행하고 데이터를 리덕스 스토어에 저장한 뒤 그 데이터를 각 컴포넌트에서 사용했다.

 react-query는 이 작업을 매우 간편하게 만들어주는데다가 데이터 캐싱을 아주 쉽게 해결할 수 있다. 쿼리에 staleTime: Infinity, cacheTime: Infinity 옵션만 추가하면 앱을 끄기 전까지 다시 fetch되지 않는 데이터로 만드수 있다. 데이터가 처음 fetch되는 동안 isLoading 등의 상태를 직접 선언하고 조작할 필요도 없다. react-query에서 모든 상태값과 메서드를 제공하기 때문이다.

 물론 이러한 서버 데이터와 관계없이 전역적으로 다뤄야 하는 데이터들이 있다. 예를 들면 theme: 'light'|'dark'를 저장하고 있는 전역 데이터는 클라이언트에서만 다루는 데이터이다. 이러한 데이터는 react-query에 임의로 저장하고 다루는 것이 아니라 컨텍스트나 전역 상태관리 라이브러리를 사용해서 핸들링 해야한다.

 현재 가장 추천하는 조합은 react-query + recoil이다. context api가 가지고 있는 여러가지 이슈가 있기 때문에 전역 상태관리 라이브러리 하나는 사용을 해야 개발이 편한데, 성능 이슈 없이 간단하게 사용할 수 있기 떄문에 recoil을 추천한다.

 

일단 redux와 react-query만 쓴다며 redux를 사용하여야하고 아니면 recoil과 react-query를 같이 사용해야한다.

 

리덕스의 사용법은

스토어, 액션, 기준값, 액션크리에이트, 리듀서를 만들어서 사용하면된다.