[React Query 공식문서] TanStack Query (구 React Query) 란

React Query 공식문서를 번역하고 정리하였습니다.

 

TanStack Query (구 React Query)는 웹 애플리케이션을 위한 데이터 가져오기 라이브러리로 종종 설명되지만,

기술적으로는

웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하며, 동기화하고 업데이트하는 과정을 간편하게 해줍니다.

동기

대부분의 핵심 웹 프레임워크는 데이터 가져오기 또는 업데이트에 대한 일관된 방법을 제공하지 않습니다.

이로 인해 개발자들은 데이터 가져오기에 대한 엄격한 의견을 포함하는 메타 프레임워크를 구축하거나,

자신만의 데이터 가져오기 방법을 발명하게 됩니다.

 

메타 프레임워크란 데이터 처리에 대한 명확한 규칙이나 구조를 제공하는 프레임워크를 의미합니다.

이는 보통 구성 요소 기반 상태와 부작용을 조합하거나, 비동기 데이터를 앱 전역에서 저장하고 제공하기 위해 더 일반적인 상태 관리 라이브러리를 사용하는 것을 의미합니다.

 

전통적인 상태 관리 라이브러리는

클라이언트 상태 작업에는 훌륭하지만 비동기 또는 서버 상태 작업에는 그다지 적합하지 않습니다.

서버 상태는 본질적으로 다르기 때문입니다.

 

우선, 서버 상태는 다음과 같은 특징이 있습니다:

• 원격 위치에 영속적으로 저장
  • 서버에 저장된 데이터는 사용자가 직접 제어하지 않는 외부 환경에 존재합니다.
• 비동기 API 필요
  • 서버와의 통신은 네트워크 요청을 통해 이루어지므로, 데이터 요청과 응답이 비동기적으로 처리됩니다.
• 공유 소유권
  • 여러 사용자나 시스템이 동일한 데이터를 수정할 수 있으므로, 데이터의 일관성을 관리해야 합니다.
• 구식 상태
  • 다른 사용자가 데이터를 변경하면, 이를 반영하지 않으면 애플리케이션 내 데이터가 오래된 상태로 남을 수 있습니다.

서버 상태의 본질을 이해하고 나면, 더 많은 도전과제가 발생할 수 있습니다. 예를 들어:

• 캐싱
  • 데이터 요청을 효율적으로 처리하기 위해 불필요한 네트워크 요청을 줄이는 기술입니다.
  • 캐싱을 잘 구현하는 것이 프로그래밍에서 가장 어려운 일 중 하나로 여겨집니다.
• 중복 제거
  • 동일한 데이터에 대한 여러 요청을 단일 요청으로 통합하여 서버의 부담을 줄이는 과정입니다.
• 구식 데이터 업데이트
  • 데이터가 변경되었음을 감지하고, 이를 자동으로 업데이트하는 기능입니다.
• 데이터 반영 속도
  • 사용자가 데이터 변경 시 즉각적으로 반영되도록 하는 방법입니다.
• 성능 최적화
  • 페이지네이션(데이터를 여러 페이지로 나누어 보여주는 기법)이나 지연 로딩(필요할 때만 데이터를 가져오는 기법)을 통해 애플리케이션의 속도를 높이는 기술입니다.
• 메모리 관리
  • 서버 상태의 데이터를 효율적으로 관리하고, 불필요한 메모리 사용을 줄이는 것입니다.

이 목록에 압도되지 않았다면, 아마도 이미 서버 상태 문제를 모두 해결했을 것이고 상을 받을 자격이 있습니다.

그러나 대다수의 사람들과 같다면, 이러한 도전과제 중 상당수를 아직 해결하지 못했을 것이고, 이제 겨우 표면을 긁어낸 것에 불과할 것입니다!

 

React Query는 서버 상태를 관리하는 데 있어 손에 꼽히는 최고의 라이브러리입니다.

기본적으로 아무 설정 없이도 잘 작동하며, 애플리케이션이 성장함에 따라 원하는 대로 맞춤 설정할 수 있습니다.

 

React Query는 서버 상태의 복잡한 도전과제를 극복하고, 애플리케이션 데이터를 제어할 수 있도록 도와줍니다.

 

기술적인 측면에서 React Query는 다음과 같은 효과를 기대할 수 있습니다:

• 복잡한 코드 감소
  • 복잡하고 오해를 불러일으키는 코드의 많은 줄을 제거하고, 몇 줄의 React Query 로직으로 대체할 수 있습니다.
• 유지 관리 용이성
  • 애플리케이션을 더 유지 관리하기 쉽게 만들고, 새로운 서버 상태 데이터 소스를 연결하는 데 대한 걱정 없이 새로운 기능을 구축할 수 있습니다.
• 사용자 경험 향상
  • 최종 사용자에게 직접적인 영향을 미쳐 애플리케이션이 더 빠르고 반응성이 뛰어나게 느껴지도록 합니다.
• 대역폭 절약 및 성능 향상
  • 네트워크 사용을 줄이고 메모리 성능을 높일 수 있습니다.

이제 코드 예제를 보여드리겠습니다!

아래 예제에서는 React Query가 가장 기본적이고 간단한 형태로 사용되어

GitHub 프로젝트의 React Query 통계를 가져오는 모습을 볼 수 있습니다

 

이 코드는 GitHub API를 통해 React Query의 리포지토리 정보를 가져오고, 로딩 상태, 에러 처리, 그리고 데이터를 화면에 출력하는 간단한 예제입니다.