[TanStackQuery] TanStackQuery 개요 및 기능 [7/23 study]

 

 

TanStackQuery 개요 및 기능

 

 

 

 

서버 상태(Server State)

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

 

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

 

이런 서버 상태 데이터의 특징들 때문에, 우리는 클라이언트 상태 데이터를 사용할 때와는 달리 다양한 시나리오를 고민하고 관리해야 합니다. 데이터를 받아오는 중에는 어떤 화면을 보여줄 것인지, 로딩과 에러 상황은 어떻게 알 수 있을지, 서버로부터 받아 온 데이터들은 어떻게 관리할지, 데이터를 주기적으로 받아오려면 어떤 식으로 구현해야 할지 등등 여러 가지를 고려해야 하는데요. 잠깐만 생각해 봐도 머리가 좀 복잡해지죠? 기존의 Redux 같은 라이브러리에서는 이런 서버 데이터들의 특성에 맞게 구현하고 데이터들을 관리하는 게 쉽지 않았는데요. 다행히도 이런 상황을 해결하기 위해 리액트 쿼리가 등장하게 되었습니다.

 

개요

- TanStack-Query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리이다. 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어졌다.

- TanStack-Query에서는 기존 상태 관리 라이브러리인 redux, mobX가 클라이언트 상태 작업에 적합하지만, 비동기 또는 서버 상태 작업에는 그다지 좋지 않다고 언급한다.

- 클라이언트 상태(Client State)와 서버 상태(Server State)는 완전히 다른 개념이며, 클라이언트 상태는 각각의 input 값으로 예를 들 수 있고, 서버 상태는 데이터베이스에 저장되어 있는 데이터로 예를 들 수 있다.

 

기능

- 캐싱

- 동일한 데이터에 대한 중복 요청을 단일 요청으로 통합

- 백그라운드에서 오래된 데이터 업데이트

- 데이터가 얼마나 오래되었는지 알 수 있다.

- 데이터 업데이트를 가능한 빠르게 반영

- 페이지네이션 및 데이터 지연 로드와 같은 성능 최적화

- 서버 상태의 메모리 및 가비지 수집 관리

- 구조 공유를 사용하여 쿼리 결과를 메모화