728x90
728x90
Tanstack Query(React Query)
들어가며
- React Query라고 불린 Tanstack Query 라이브러리에 대해 정리해본다.
![]() |
![]() |
![]() |
Tanstack Query(React Query)
개념
- 리액트 애플리케이션에서 서버 상태(데이터)를 쉽게 관리하고 조작할 수 있도록 도와주는 라이브러리
- React Query가 2022년 초에 Tanstack Query로 이름이 변경되었다.
- React Query가 포함된 Tanstack 생태계를 확장하고, 다양한 프레임워크와 플랫폼에서 사용할 수 있는 범용 데이터 페칭 및 상태 관리 라이브러리를 목표로 하기 위해서 였다고 한다.
- Tanstack Query는 이제 React뿐만 아니라 Vue, Svelte, Solid와 같은 다른 프레임워크에 대한 지원도 포함하고 있으며, Tanstack Query로의 이름 변경은 React Query의 기능적 변화보다는 브랜딩과 생태계 확장을 반영한 것이라고 한다.
설치
- 터미널에 아래 명령을 실행하여 설치할 수 있다.
$ npm install @tanstack/react-query # yarn add @tanstack/react-query
주요 기능
데이터 페칭(Fetching Data)
- 데이터를 서버에서 가져와서 리액트 컴포넌트와 동기화하는 작업을 간단하게 처리할 수 있다.
- @useQuery@ 훅을 사용하여 데이터를 가져오고, 로딩 상태와 오류 상태를 쉽게 관리할 수 있다.
데이터 변조(Mutating Data)
- 데이터를 서버에 보내서 생성, 수정, 삭제하는 작업을 수행할 수 있다.
- @useMutation@ 훅을 사용하여 이러한 변조 작업을 간편하게 수행할 수 있다.
자동 리페치(Automatic Refetching)
- 사용자가 탭을 전환하거나 네트워크 상태가 변경될 때 데이터를 자동으로 다시 가져올 수 있다.
- 특정 이벤트나 시간 간격에 따라 자동으로 데이터를 새로 고칠 수 있다.
캐싱(Caching)
- 가져온 데이터를 캐시에 저장하여 동일한 데이터 요청 시 불필요한 네트워크 요청을 줄일 수 있다.
- 캐시된 데이터를 사용하면서 배경에서 새로운 데이터를 가져오는 기능을 제공한다.
병렬 및 의존 쿼리(Parallel and Dependent Queries)
- 여러 쿼리를 병렬로 실행하거나, 특정 쿼리가 완료된 후에 다른 쿼리를 실행할 수 있다.
쿼리 무효화(Query Invalidation)
- 특정 이벤트가 발생할 때 캐시된 데이터를 무효화하고, 데이터를 새로 가져오게 할 수 있다.
낙관적 업데이트(Optimistic Updates)
- 데이터를 변경할 때, 서버의 응답을 기다리지 않고 UI를 즉시 업데이트하여 사용자 경험을 향상시킬 수 있다.
Tanstack Query를 사용해야 하는 이유?
- 간편함
- 복잡한 상태 관리 로직을 단순화하여 코드의 가독성과 유지 보수성을 높인다.
- 내장된 훅을 사용하여 데이터 페칭과 상태 관리를 쉽게 처리할 수 있다.
- 효율성
- 캐싱과 자동 리페치 기능을 통해 불필요한 네트워크 요청을 줄이고, 애플리케이션의 성능을 향상시킨다.
- 확장성
- 병렬 및 의존 쿼리, 쿼리 무효화 등 고급 기능을 통해 복잡한 요구사항도 손쉽게 처리할 수 있다.
- 사용자 경험 향상
- 낙관적 업데이트, 자동 리페치 등의 기능을 통해 사용자에게 더욱 반응성 있는 UI를 제공할 수 있다.
예제 코드
import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';
// QueryClient 인스턴스 생성
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<MyComponent />
</QueryClientProvider>
);
}
function MyComponent() {
// 데이터 페칭
const { data, error, isLoading } = useQuery('fetchData', fetchData);
if (isLoading) return <span>Loading...</span>;
if (error) return <span>Error: {error.message}</span>;
return <div>Data: {JSON.stringify(data)}</div>;
}
async function fetchData() {
const response = await fetch('/api/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
}
Tanstack Query의 사용은 필수가 아니다. useEffect와 fetch를 이용하여 동일한 기능을 언제든지 만들 수 있다.
참고 사이트
TanStack Query
Instead of writing reducers, caching logic, timers, retry logic, complex async/await scripting (I could keep going...), you literally write a tiny fraction of the code you normally would. You will be surprised at how little code you're writing or how much
tanstack.com
728x90
728x90
'Programming > React.js' 카테고리의 다른 글
[React.js] Compound Component 패턴 (0) | 2024.08.12 |
---|---|
[React.js] Framer Motion 라이브러리 (0) | 2024.08.11 |
[React.js] Suspense 컴포넌트 (0) | 2024.08.06 |
[React.js] 낙관적 업데이트(Optimistic Updates) (React Query) (0) | 2024.07.10 |
[React.js] 지연 로딩(Lazy Loading) (0) | 2024.07.08 |
[React.js] useSearchParams 훅 (0) | 2024.07.08 |
[React.js] defer() (0) | 2024.07.07 |
[React.js] useFetcher 훅 (0) | 2024.07.07 |