웹 사이트에서 사용하는 상태 데이터는 크게 두 가지로 나눌 수 있다.

• 클라이언트 상태 데이터
• 서버 상태 데이터

클라이언트 상태 데이터

사이트의 어떤 메뉴가 열렸는지 닫혔는지, 혹은 사용자가 어떤 버튼을 눌렀는지 아닌지와 같은 UI 상태 값이나, 유저가 입력 폼에 입력한 데이터 등 서버와는 상관없이 웹 브라우저 안에서만 사용하는 데이터를 말한다.

서버상태(Server State)

서버 상태 데이터는 몇 가지 특징을 가지고 있다.
먼저 서버에서 데이터를 받아오기까지 시간이 걸린다.
그래서 데이터를 비동기식으로 받아오도록 구현한다.
실제로 데이터를 받아오기까지 플레이스 홀더를 보여주거나 혹은 로딩 처리를 하곤 한다.
때로는 데이터를 받아오는 과정에서 에러가 생길 수 있다.
그럴 때 이런 에러 상황을 어떻게 처리하고 어떤 식으로 유저에게 안내해 줄 것인지에 대한 고민도 필요하다.

또한 서버 상태 데이터는 가능한 최신 상태로 유지되어야 한다.
데이터를 한 번 받아 오면 끝나는 게 아니라, 최신 데이터를 가능한 한 계속 받아 와야 한다.
여기서 '가능한'이라고 표현한 이유는 사이트의 성격에 따라 얼마나 최신으로 데이터를 유지해야 하는지가 달라지기 때문이다.
예를 들어 주식 사이트의 경우 1초 1초가 중요하므로 실시간으로 데이터를 받아오는 게 매우 중요하다.
그러나 모든 사이트가 초마다 데이터를 받아올 필요까지는 없을 수 있다.
어떤 사이트에서는 1분에 한 번 혹은 5분에 한 번만 데이터를 받아오는 것으로 충분할 수 있다.

이런 서버 상태 데이터의 특징 때문에, 우리는 클라이언트 상태 데이터를 사용할 때와는 달리 다양한 시나리오를 고민하고 관리해야 한다.
데이터를 받아오는 중에는 어떤 화면을 보여줄 것인지, 로딩과 에러 상황은 어떻게 알 수 있을지, 서버로부터 받아온 데이터들은 어떻게 관리할지, 데이터를 주기적으로 받아오려면 어떤 식으로 구현해야 할지 등등 여러 가지를 고려해야 한다.

기존의 Redux 같은 라이브러리에서는 이런 서버 데이터들의 특성에 맞게 구현하고 데이터들을 관리하는 게 쉽지 않았는데, 다행히 이런 상황을 해결하기 위해 리액트 쿼리가 등장하게 되었다.

React Query

리액트 쿼리는 데이터를 가져오는 과정에서 로딩과 에러 처리를 쉽게 구현할 수 있도록 여러 값을 제공해 주고, 정해진 시간 혹은 조건마다 서버 상태 데이터를 최신으로 가져오는 작업도 알아서 해준다.
그뿐만 아니라 캐시라는 걸 사용해서 매번 서버에 데이터를 가져올 필요 없이 유저에게 더 빠르게 데이터를 보여주기도 한다.

그 외에도 리액트 쿼리는 페이지네이션이나 Infinite Query, Optimistix Update와 같은 웹 사이트들에서 자주 사용하는 기능을 손쉽게 구현할 수 있도록 해준다.

정리

리액트 쿼리는 클라이언트에서 fetching을 하고, 그 결과를 캐싱하고, 마지막으로 서버 데이터에 어떤 변화가 생겼을 대 이것을 동기화까지 전부 지원해주는 라이브러리이다.