React Query
React Context의 아쉬운 부분들을 보완하기 위해서 Redux, Recoil 등 React와 함께 사용할 수 있는 다양한 상태 관리 라이브러리들이 등장했다.
상태 관리를 하는 데이터는 내 컴퓨터에서만 사용하는 데이터인 클라이언트 상태 데이터와 서버에서 가져온 데이터인 서버 상태 데이터로 나눌 수 있다.
앞에서 언급한 상태 관리 라이브러리들은 클라이언트 상태 데이터들을 잘 관리하기 위해 나온 라이브러리들인데, 서버 상태 데이터를 관리하기엔 잘 맞지 않는 부분도 있고, 자칫 코드가 복잡해지는 문제가 있었다.
그래서 이를 해결하기 위해 서버 상태 데이터만을 집중적으로 관리하는 리액트 쿼리가 등장했다.
웹사이트에서 사용하는 상태 데이터는 클라이언트 상태 데이터와 서버 상태 데이터, 크게 두 가지로 나눌 수 있다.
서버 상태
서버 상태 데이터는 몇 가지 특징을 가지고 있다.
- 서버에서 데이터를 받아오기까지 시간이 걸리기 때문에 데이터를 받아오는 걸 비동기식으로 구현한다.
(데이터를 받아오기까지 플레이스 홀더를 보여주거나 로딩 처리를 하곤 한다. 데이터를 받아오는 과정에서 에러가 생기는 경우에 대한 고민도 필요하다) - 서버 상태 데이터는 가능한 최신 상태로 유지되어야 한다.
얼마나 최신으로 데이터를 유지해야 하는지에 따라 받아오는 주기가 달라질 수 있다.
이런 서버 상태 데이터의 특징들 때문에 클라이언트 상태 데이터를 사용할 때와는 달리 다양한 상황을 고민하고 관리해야 한다.
기존의 Redux 같은 라이브러리에서는 이런 서버 데이터들의 특성에 맞게 구현하고 데이터들을 관리하는 게 쉽지 않았는데, 이런 상황을 해결하기 위해 리액트 쿼리가 등장하게 되었다.
React Query
리액트 쿼리는 데이터를 가져오는 과정에서 로딩과 에러 처리를 쉽게 구현할 수 있도록 여러 값을 제공해 주고, 정해진 시간 혹은 조건마다 서버 상태 데이터를 최신으로 가져오는 작업도 알아서 해준다. 그뿐만 아니라 캐시(cache)라는 걸 사용해서 매번 서버에서 데이터를 가져올 필요 없이 유저에게 더 빠르게 데이터를 보여주기도 한다.
그 외에도 리액트 쿼리는 페이지네이션이나 Infinite Query, Optimistic Update와 같은 웹사이트들에서 자주 사용하는 기능을 손쉽게 구현할 수 있도록 해준다.
