출처 Tanstack Query 공식문서 https://tanstack.com/query/v5/docs/framework/react/overview
개요
TanStack Query (구 React Query)는 종종 웹 애플리케이션에서 데이터 fetching을 위한 라이브러리로 설명된다. 하지만 좀 더 기술적인 관점에서 TanStack Query는 웹 애플리케이션에서 서버 상태를 fetching하고 캐싱하고, 동기화 및 업데이트하는 작업을 간결하게 만들어준다.
동기
대부분의 핵심 웹 프레임워크는 데이터를 fetching하거나 업데이트하는 방법에 대해 일관된 방식을 제시하지 않는다. 이 때문에 개발자들은 데이터 fetching을 엄격하게 관리하는 메타 프레임워크를 구축하거나, 데이터 fetching을 하는 자신만의 방법을 만든다. 이는 일반적으로 컴포넌트 기반의 상태나 부수 효과를 엮거나, 앱 전체에 대하여 비동기적인 데이터를 저장하고 제공하는 더 일반적인 용도의 상태 관리 라이브러리를 사용한다는 것을 의미한다.
전통적인 상태 관리 라이브러리는 클라이언트 상태 작업에는 훌륭하지만, 비동기 또는 서버 상태 작업에는 그렇게 좋지 않다. 이는 서버 상태는 완전히 다른 문제이기 때문이다.
서버 상태란:
- 당신이 제어하거나 소유하지 않는 원격의 장소에 지속적으로 저장됨
- fetching 및 업데이트를 위한 비동기 API가 필요함
- 소유권이 공유되어 있기 때문에, 당신의 알지 못하는 사이에 다르 사람이 데이터를 변경할 수 있음
- 주의하지 않으면 애플리케이션에서 "out of date" 상태가 될 수 있음
이러한 서버 상태의 본질을 이해한다면, 많은 어려운 문제들이 다가올 것이다.
- 캐싱
- 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
- "out of date" 데이터를 백그라운드에서 업데이트
- 어떤 데이터가 "out of date"인지 알기
- 가능한 한 빠르게 데이터 업데이트를 반영
- 성능 최적화 (페이지네이션, 데이터 지연 로딩 등)
- 서버 상태의 메모리 관리 및 가비지 컬렉션
- 구조적 공유를 통한 쿼리 결과 메모이징
Tanstack Query는 서버 상태를 관리하는 데 있어 손에 꼽히는 최고의 라이브러리이다. 이 라이브러리는 기본 설정만으로도 놀랍도록 잘 작동하며, 애플리케이션이 성장함에 따라 원하는 대로 커스터마이징할 수 있다.
React Query는 서버 상태의 까다로운 문제들을 해결하고, 앱의 데이터를 관리할 수 있게 도와준다.
좀 더 기술적인 측면에서, React Query는 다음과 같은 일을 한다:
- 애플리케이션에서 복잡하고 잘못된 코드 라인을 제거하고, 몇 줄의 React Query 로직으로 대체할 수 있음
- 새로운 서버 상태 데이터 소스에 연결하는 것을 걱정하지 않아도 됨. 애플리케이션 유지 관리와 새로운 기능 구축이 쉬워짐
- 사용자가 애플리케이션이 더 빠르고 반응성이 뛰어난 것처럼 느껴지게 만듦
- 잠재적으로 대역폭을 절약하고 메모리 성능을 향상시킴
코드 예시
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 { isPending, error, data } = useQuery({
queryKey: ['repoData'],
queryFn: () =>
fetch('https://api.github.com/repos/TanStack/query').then((res) =>
res.json(),
),
})
if (isPending) 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>
)
}
소감
정글에서 마지막 나만무 프로젝트를 할 때 현업 경험이 있으셨던 DevOps 팀원 분께서 클라이언트 프로젝트에 React Query를 사용할 것을 추천해주셨다. 나는 클라이언트에서는 주로 컴포넌트 관리와 디자인 쪽을 맡았었고 다른 팀원 분이 클라이언트 API 통신을 맡았어서 그 팀원에게 React Query에 대해 알음알음 배웠었다.
공식 문서를 읽어보니 React Query의 핵심은 서버 상태 관리 그리고 성능 개선인 것 같다. 클라이언트 상태 관리도 어려운 주제인데 서버 상태 관리에 대해서도 신경써줘야 한다니 웹 개발의 세계는 정말 고려할 것 투성이인 것 같다. 그래도 React Query라는 좋은 라이브러리가 있어서 서버 상태를 캐시하고 동기화하는 것에 대해서는 개발자가 걱정을 덜 해도 돼서 다행인 것 같다.
'React' 카테고리의 다른 글
[TanStack Query] 중요한 기본 설정, Query 기본, Query key (0) | 2025.01.02 |
---|