TanStack Query (React Query)는 주로 웹 애플리케이션애서 누락된 데이터 불러오기 라이브러리로 설명되지만, 더 자세히는 웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 손쉽게 해주는 라이브러리입니다.
동기(Motivation)
대부분의 핵심 웹 프레임워크는 전체적으로 데이터를 가져오거나 업데이트하는 설득력 있는 방법을 제공하지 않습니다. 이러한 이유로 개발자들은 데이터 가져오기에 대한 엄격한 기준을 캡슐화하는 메타 프레임워크를 구축하거나 데이터를 가져오는 자체적인 방법을 개발하게 됩니다. 이는 일반적으로 컴포넌트 기반 상태와 사이드 이펙트들을 조합하거나, 애플리케이션 전체에 비동기 데이터를 저장하고 제공하기 위해 보다 범용적인 상태 관리 라이브러리를 사용하는 것을 의미합니다.
대부분의 기존 상태 관리 라이브러리는 클라이언트 상태 작업에는 적합하지만 비동기 또는 서버 상태 작업에는 적합하지 않습니다. 서버 상태는 완전히 다르기 때문입니다. 우선, 서버 상태는:
- 사용자가 제어하거나 소유하지 않는 위치에서 원격으로 유지됩니다.
- 가져오기 및 업데이트에 비동기 API가 필요합니다.
- 공유 소유권을 의미하며 사용자가 모르는 사이에 다른 사용자가 변경할 수 있습니다.
- 주의하지 않으면 잠재적으로 애플리케이션이 '오래된' 상태가 될 수 있습니다.
애플리케이션에서 서버 상태의 특성을 파악하면 다음과 같은 더 많은 문제가 발생할 수 있습니다:
- 캐싱... (아마도 프로그래밍에서 가장 어려운 일)
- 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
- 백그라운드에서 "오래된" 데이터 업데이트
- 데이터가 "오래된" 시기 파악
- 가능한 한 빨리 데이터에 업데이트 반영
- Pagination, lazy loading data 같은 성능 최적화
- 서버 상태의 메모리 및 가비지 컬렉션 관리
- 구조적 공유를 통한 쿼리 결과 메모화
이 목록에 압도되지 않았다면 서버 상태 문제를 이미 모두 해결했으므로 상을 받을 자격이 있다는 의미일 것입니다. 하지만, 만약 여러분이 대다수의 사람들과 같다면, 여러분은 아직 이러한 문제들의 전부 또는 대부분을 해결하지 못했고 단지 수박 겉핥기를 하고 있을 것입니다!
React Query는 서버 상태 관리를 위한 최고의 라이브러리 중 하나입니다. 별도의 설정 없이 바로 사용할 수 있으며, 애플리케이션이 성장함에 따라 원하는 대로 커스터마이징할 수 있습니다.
React Query를 사용하면 서버 상태의 까다로운 문제와 장애물을 극복할 수 있으며, 문제들이 당신을 제어(control)하기 전에 앱 데이터를 제어(control)할 수 있습니다
좀 더 기술적으로 설명하자면, React Query는:
- 애플리케이션에서 복잡하고 오해의 소지가 있는 여러 줄의 코드를 제거하고 몇 줄의 React Query 로직으로 대체할 수 있습니다.
- 새로운 서버 상태 데이터 소스를 연결할 걱정 없이 애플리케이션의 유지보수를 개선하고 새로운 기능을 더 쉽게 구축할 수 있습니다.
- 애플리케이션이 그 어느 때보다 빠르고 응답성이 높아짐으로써 최종 사용자에게 직접적인 영향을 미칩니다.
- 대역폭을 절약하고 메모리 성능을 향상시킬 수 있습니다
설명은 충분하니 코드부터 보여주세요!
아래 예제에서는 ReactQuery GitHub 프로젝트 자체에 대한 GitHub 통계를 가져오는 데 사용되는 가장 기본적이고 간단한 형식의 ReactQuery를 볼 수 있습니다:
import {
QueryClient,
QueryClientProvider,
useQuery,
} from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
function Example() {
const { isLoading, error, data } = useQuery({
queryKey: ['repoData'],
queryFn: () =>
fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
(res) => res.json(),
),
})
if (isLoading) return 'Loading...'
if (error) return 'An error has occurred: ' + error.message
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong>👀 {data.subscribers_count}</strong>{' '}
<strong>✨ {data.stargazers_count}</strong>{' '}
<strong>🍴 {data.forks_count}</strong>
</div>
)
}당신이 나를 설득했어요, 그래서 지금은요?
- 공식 React Query Course를 수강해 보세요(또는 팀 전체를 위해 구매해 보세요!).
- 놀라울 정도로 완벽한 Walkthrough Guide, API Reference를 통해 원하는 속도로 React Query를 학습할 수 있습니다.
Reference
