다시한번 정의 하자면, react-query는 리액트 애플리케이션에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리이다.
기본적으로 사용하는 React는 서버로부터 데이터를 불러오기 위한 특정한 구현은 존재하지 않았다. 대신, 리액트 컴포넌트에서 useEffect Hook을 사용해서 API를 호출하거나 Redux와 같은 global state를 통해 API를 호출하여 사용하였다.
여기서 더 좋은 사용자 경험을 위해 Cache, Retry, Refetch를 추가한다면, 고려해야할 사항들이 늘어나기 시작한다…
그래서 react-query를 사용하면 큰 리소스 소모 없이 위 기능들을 추가할 수 있다. 그리고 더 리액트 스럽게 API를 관리할 수 있다는 장점이 존재한다.
또한 react-query를 사용하여 사용자 경험을 향상시킬 수 있다. react-query를 사용한 컴포넌트의 Ummount시 Hook이 unmount와 동시에 API 요청을 진행하는 Promise를 Cancel하여 예상치 못한 side effect를 최소화 할 수 있다.
(API 요청들은 리액트 컴포넌트의 생명주기와 관계없이 진행되므로 때때로 컴포넌트가 unmount 되었지만 API 요청 promise는 계속 진행되는 케이스가 있다.)
혼동하면 안되는 것이 react-query는 fetch나 axios를 대체하는 라이브러리가 아니다.
API를 통해 불러온 서버의 상태를 내부적으로 캐싱하고 지속적으로 동기화하는 등 사용하기 좋게 도와주는 라이브러리일 뿐이다. 따라서, 실제 API 요청을 수행하는 함수는 fetch나 axios를 통해 구현해야 한다. 차이는 명확히 구분하자.
*react-query를 도입하게 된 결정적인 이유가 전역 상태에 모든 것을 저장하는 것에 의구심이 들었기 때문이다. 신규 라이브러리를 도입할때는 고민이 되기 마련인데 강력한 캐싱과 해싱 기능, mutation을 통한 편리한 side effect 관리가 가능하다는 점에서 도입을 결정하게 되었다.*
*React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리이다. 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적이로 API를 사용할 수 있다.*
더 나아가 React Query에서 제공하는 캐싱, Window Focus Refatching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업 없이 “핵심 로직”에 집중할 수 있다.