React-query란?
서버 상태를 다루는 라이브러리입니다.
프로젝트에서 사용했던 Redux 나 여러기업에서 사용되고있는 mobx등은 클라이언트 상태를 다루는 라이브러리.
React-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용됩니다.
사용하는 이유
서버로 부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많습니다.
그렇다보니 store는 클라이언트 state를 유지해야하는데 어느 순간부터 store에 클라이언트 데이터와 서버 데이터가 공존 하게 되는데 그리고 그 데이터가 서로 상호작용하면서 서버 데이터도 클라이언트 데이터도 아닌 끔찍한 혼종(?)이 탄생하게 됩니다. 그래서 react-query를 사용함으로 서버, 클라이언트 데이터를 분리합니다.
즉 react-query는 전역 상태관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업을 쉽게 해주는 라이브러리이기 때문에 react-query를 도입한다면 개발자가 전역적으로 관리해야하는 데이터는 매우 적을 것이다.
장점
- 캐싱
- get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다.
- 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries)
- 동일 데이터 여러번 요청하면 한번만 요청한다.
- 무한 스크롤
- 비동기 과정을 선언적으로 관리할 수 있다.
- react hook과 사용하는 구조가 비슷하다.
과거 리액트 개발자들이 서버에서 데이터를 받아오는 작업을 리덕스에서 처리하기위해 리덕스썽크,리덕스사가 등을 이용해서 비동기 작업을 수행하고 데이터를 리덕스 스토어에 저장한 뒤 그 데이터를 각 컴포넌트에서 사용했다.
리액트쿼리는 이 작업을 매우 간편하게 만들어주는 데다가 데이터 캐싱을 아주 쉽게 해결할 수 있다. 쿼리에 옵션만 추가하면 앱을 끄기 전까지 다시 fetch(패치)되지 않는 데이터로 만들 수 있다.
데이터가 처음 fetch(패치)되는 동안 isLoading 등의 상태를 직업 선언하고 조작할 필요도 없다. React-query에서 모든 상태값과 메서드를 제공하기 때문 물론 이러한 서버 데이터와 관계없이 전역적으로 다뤄야 하는 데이터들이 있는데 이러한 데이터는 react-query에 임의로 저장하고 다루는 것이 아니라 컨텍스트나 전역상태관리 라이브러리를 사용해서 핸들링 해야 한다.그래서 react전용이며 react에 최적화되어있는 전역상태관리 라이브러리인 recoil(리코일)을 함께 사용하는것을 추천.
