많은 이유가 있다.
•
일단 Redux와 React-query는 비교 대상은 아니다. 만약 로컬 상태와 전역 상태, 클라이언트의 상태와 서버의 상태를 제대로 분리하지 않고 다루고 있었다면 Redux에서 다루는 상태를 React-query에서 하도록 이동시킬 수 있다.
•
Redux는 전역 상태를 관리하고 클라이언트의 전역 상태를 관리하는 것이지 서버의 상태를 제대로 관리할 수 없다.
•
React-query를 사용하면 보일러플레이트가 많이 줄어든다.
•
React-query는 React에 종속적인 라이브러리이므로 React가 버전업될 때 지원하는 기능이나 변화에 맞춰 발빠르게 대응해줄 수 있다.
•
Redux에서 서버 데이터를 다룰 때 항상 post/put/patch 메소드를 사용하게 되면 데이터를 수정하고 다시 get 메소드 요청을 통해 서버와의 동기화가 필요해진다는 점이다.
그래서 변경된 data를 post 이후 응답으로 받아서 변경된 item을 업데이트하는 식으로 할수야 있겠지만 이것은 쉬운 일은 아니다. 그래서 보통은 get 메소드를 쌍으로 호출시서 간단하게 처리한다.
문제는 get 메소드 때문에 2배의 서버 리소스를 사용한다는 점이다.
리액트 쿼리를 사용하면 개발 비용을 낮추고 유지보수가 쉬워질 수 있다.
만약 todos라는 키로 서버 데이터를 구분한다고 하면 post 등 데이터를 변경했을 때 리액트 쿼리의 invalidateQueries 메소드에 ‘todos’ 키값을 넣어주면 된다.
그러면 유효하지 않은 데이터로 인식해서 refetching하게 된다.
이 방식은 마치 리액트의 state를 다루는 것 같다. get으로 받은 데이터를 state처럼 가지고 있고 setState(post, put, patch)하면 invalidateQueries를 호출해서 새로운 데이터로 리페칭하는 것이다.
•
추가적으로 리액트 쿼리는 데이터 수정 요청이 들어오자마자 더 빠른 UI 반응을 위한 Optimistic UI를 제공할 수 있다.(Redux보다 덜 복잡하고 다른 라이브러리 없이) 캐시된 데이터를 get, set하는 방식인데, 자세한 내용은 따로 다룬다.
