학습을 목적으로 공식 문서를 번역한 글입니다.

React Query Overview

TanStack Query(React Query)는 흔히 웹 어플리케이션을 위한 data-fetching library로 설명되지만, 보다 기술적인 측면에서 보면 웹 어플리케이션에서 서버 상태를 쉽게 fetching, caching, synchronizing, updating 할 수 있게 해준다.

🏷️ Motivation

대부분의 핵심 웹 프레임워크는 통합적으로(holistic) 데이터를 fetching 하거나 updating 하는 방식에 대해 일관된 의견을 제시하지 않는다. 이 때문에 개발자는 data-fetching에 대한 엄격한 의견을 담은 메타 프레임워크를 구축하거나 자체적인 data-fetching 방법을 개발하게 된다. 이는 일반적으로 컴포넌트 기반 상태 관리와 부수 효과(side-effect)를 함께 사용하거나, 보다 범용적인 상태 관리 라이브러리를 사용하여 앱 전반에 걸쳐 비동기 데이터를 저장하고 제공하는 것을 의미한다.

대부분의 전통적인 상태 관리 라이브러리는 클라이언트 상태 작업에는 적합하지만, 비동기 또는 서버 상태 작업에는 적합하지 않다. 이는 서버 상태가 완전히 다르기 때문이다. 서버 상태는 다음과 같은 특성을 가진다:

• 제어하거나 소유하지 않는 위치에서 원격으로 유지된다.

• fetching 및 updating에 비동기 API가 필요하다.

• 공유 소유권을 의미하며, 사용자 모르게 다른 사람이 변경할 수 있다.

• 주의하지 않으면 애플리케이션에서 잠재적으로 "오래된(out of date)" 상태가 될 수 있다.
  
  

애플리케이션에서 서버 상태의 특성을 파악하고 나면, 다음과 같은, 더 많은 문제가 발생할 수 있다.

• 캐싱 (프로그래밍에서 가장 어려운 일 중 하나일 수 있다.)

• 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거하기

• 백그라운드에서 "오래된(out of date)" 데이터 업데이트하기

• 가능한 한 빨리 데이터에 업데이트 반영하기

• pagination 및 lazy loading 데이터와 같은 성능 최적화

• 서버 상태의 메모리 및 garbage collection 관리

• 구조적 공유를 통한 query 결과 메모화(memoizing)
  
  

이 목록에 압도되지 않았다면, 이미 모든 서버 상태 문제를 해결하였고 상을 받을 자격이 있다는 뜻일 것이다. 하지만 대다수의 사람들과 마찬가지로, 아직 이러한 문제를 전부 또는 대부분 해결하지 못했다면, 당신은 이제 겨우 표면을 긁고 있는 것에 불과하다.

React Query는 서버 상태 관리를 위한 최고의 라이브러리 중 하나이다. 설정할 필요 없이 바로 사용할 수 있으며, 애플리케이션이 성장함에 따라 원하는 대로 커스터마이징 할 수 있다.

React Query를 사용하면, 서버 상태의 까다로운 문제와 장애물을 극복하고, 서버가 사용자를 제어하기 전에 앱 데이터를 제어할 수 있다.

조금 더 기술적으로 설명하자면, React Query는,

• 애플리케이션에서 복잡하고 오해의 소지가 있는 여러 줄의 코드들을 제거하고, 단 몇 줄의 React Query 로직으로 대체할 수 있다.

• 새로운 서버 상태 데이터 소스를 연결할 걱정 없이, 애플리케이션의 유지보수가 쉬워지고, 새로운 기능을 더 쉽게 구축할 수 있다.

• 애플리케이션의 속도와 반응성이 그 어느 때보다 빨라져, 최종 사용자(end-user)에게 직접적인 영향을 미친다.

• 잠재적으로 대역폭(bandwidth)를 절약하고 메모리 성능을 향상시킬 수 있다.