더 알아보기/개념

TanStack Query

은돌1113 2024. 8. 12. 09:57
728x90

TanStack Query란?

: TanStack Query는 현대 웹 애플리케이션에서 데이터 패칭, 캐싱, 동기화 및 상태 관리를 간편하게 처리할 수 있도록 돕는 라이브러리입니다. React, Vue, Svelte 등 다양한 프레임워크와 호환되며, 비동기 데이터와 서버 상태를 효율적으로 관리할 수 있는 강력한 도구입니다.

 

이 라이브러리는 API 호출, 데이터 캐싱, 폴링, 배경 업데이트와 같은 데이터 관련 작업을 간단하게 처리할 수 있도록 설계되었습니다. 개발자들은 복잡한 데이터 관리를 간소화하고, 애플리케이션의 성능을 향상시킬 수 있습니다.

 

TanStack Query와 React Query의 차이점

  1. 이름과 브랜드
    • React Query : React 전용
    • TanStack Query : 다양한 프레임워크와 라이브러리에 대한 지원
  2. 프레임워크 지원
    • React Query : React에만 최적화
    • TanStack Query : React, Vue, Svelte 등 다영한 프레임워크를 지원
  3. 패키지 이름
    • React Query : "react-query" 패키지
    • TanStack Query : 각 프레임워크에 맞는 패키지 이름이 있으며, 예를 들어 "@tanstack/react-query", "@tanstack/vue-query" 등
  4. 기능 확장
    • React Query : React 전용으로 많은 기능을 제공
    • TanStack Query : 다양한 프레임워크와 호환되도록 기능이 확장됨, 예를 들어 Vue와 Svelte의 반응형 시스템과 통합된 기능을 제공
  5. 커뮤니티와 생태계
    • React Query : React 커뮤니티에서 널리 사용되며, React 생태계의 일환으로 발전
    • TanStack Query : 더 넓은 생태계를 포괄하며, 다양한 프레임워크의 사용자와 개발자에게 더 많은 기회를 제공

 

주요 기능

: 주요 기능에는 크게 5가지가 있습니다.

  • 자동 캐싱 : 데이터는 자동으로 캐싱되어 불필요한 네트워크 요청을 줄입니다.
  • 백그라운드 데이터 동기화 : 데이터가 변경될 때 자동으로 최신 상태로 업데이트합니다.
  • 쿼리 무효화 : 데이터가 변경되면 관련된 쿼리들을 자동으로 무효화하고 새로고침합니다.
  • 폴링 및 리패칭 : 주기적으로 데이터를 새로 고치거나 특정 조건에서 리패칭을 수행합니다.
  • 오류 및 로딩 상태 관리 : 요청의 상태를 쉽게 추적하고, 로딩 및 오류 상태를 관리할 수 있습니다.

 

기본 사용법

  1. 패키지 설치 
    npm install @tanstack/vue-query @tanstack/query-core
  2. QueryClient 설정 (+ 전역 옵션 설정)
    : main.js 또는 main.ts에서 VueQueryPlugin을 설정합니다. 
    // main.js
import { createApp } from 'vue';
import App from './App.vue';
import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query';

// QueryClient 설정
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5분
      cacheTime: 1000 * 60 * 10, // 10분
      refetchOnWindowFocus: false, // 창이 포커스를 받을 때 리패칭 안 함
      refetchOnReconnect: true, // 재연결 시 리패칭
      retry: 2, // 요청 실패 시 최대 2번 재시도
    },
    mutations: {
      retry: 3, // 뮤테이션 실패 시 최대 3번 재시도
    },
  },
});

const app = createApp(App);
app.use(VueQueryPlugin, { queryClient });
app.mount('#app');
  3. useQuery 사용 
    // main.js
import { createApp } from 'vue';
import App from './App.vue';
import { VueQueryPlugin } from '@tanstack/vue-query';

const app = createApp(App);
app.use(VueQueryPlugin);
app.mount('#app');

// TodoList.vue
<template>
  <div>
    <h1>Todo List</h1>
    <div v-if="isLoading">Loading...</div>
    <div v-if="error">Error: {{ error.message }}</div>
    <ul v-if="data">
      <li v-for="todo in data" :key="todo.id">
        {{ todo.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useQuery } from '@tanstack/vue-query';
import { fetchTodos } from './api';

const { data, error, isLoading } = useQuery(['todos'], fetchTodos);
</script>

개발자 모드 설정

  1. Devtools 설치 
  2. npm install @tanstack/query-devtools
  3. Devtools 구성 및 사용 (Vue 3인 경우) 
    // main.js
import { createApp } from 'vue';
import App from './App.vue';
import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query';
import { QueryClientProvider } from '@tanstack/vue-query';
import { QueryDevtools } from '@tanstack/query-devtools';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5분
      cacheTime: 1000 * 60 * 10, // 10분
      refetchOnWindowFocus: false,
      refetchOnReconnect: true,
      retry: 2,
    },
  },
});

const app = createApp(App);
app.use(VueQueryPlugin, { queryClient });

app.component('QueryDevtools', QueryDevtools);

app.mount('#app');
  4. Devtools를 App.vue에 추가 
    <!-- App.vue -->
<template>
  <div id="app">
    <router-view />
    <QueryDevtools />
  </div>
</template>

<script setup>
import { QueryDevtools } from '@tanstack/query-devtools';
</script>

 

728x90