Today

TypeScript를 공부해야 하지만 넘어가기 전에
배웠던 내용을 다시 복습하고 넘어가야 할 것 같다.

그 중 아직도 생소한 개념인 Tanstack Query

1. Tanstack Query

• 서버 상태를 관리하는데 유용한 라이브러리
• React에서 데이터 페칭, 캐싱, 동기화 및 서버 상태 업데이트를 쉽게 할 수 있음

설치

yarn add @tanstack/react-query

npm install @tanstack/react-query

사용법

1. QueryClient 생성 / QueryClientProvider 추가

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <Todos />
  </QueryClientProvider>
);

export default App;

• QueryClient 인스턴스를 생성
  => 이 인스턴스는 React Query의 모든 상태와 캐시를 관리
• QueryClientProvider로 queryClient를 애플리케이션에 제공

2. API 함수 작성

import axios from 'axios';

export const getTodos = async () => {
  const { data } = await axios.get('/api/todos');
  return data;
};

export const postTodo = async (newTodo) => {
  const { data } = await axios.post('/api/todos', newTodo);
  return data;
};

3. useQuery 훅을 사용하여 데이터 페칭 / useMutation을 사용 새로운 Todo 추가

import { useQuery } from '@tanstack/react-query';

// Access the client
const queryClient = useQueryClient()

function Todos() {
  // Access the client
  const queryClient = useQueryClient()

  // Queries
  const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })

  // Mutations
  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
  })

  return (
    <div>
      <ul>{query.data?.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>

      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
}

• useQueryClient로 QueryClient 인스턴스에 접근
• useQuery로 fetchTodos 함수를 사용하여 'todos' 데이터를 페칭
• useMutation로 postTodo 함수를 사용하여 새로운 Todo를 추가, 성공 시, 'todos' 쿼리를 무효화하고 다시 페칭
• query.data를 사용하여 Todo 리스트를 렌더링하고, 버튼 클릭 시 mutation.mutate로 새로운 Todo를 추가

---

Learn

정리

• Tanstack Query는 서버에서 데이터를 가져오고 이를 관리하는 데 필요한 다양한 기능을 제공

• 주요 기능으로는 데이터 페칭, 캐싱, 백그라운드 데이터 동기화, 오류 처리

• Tanstack Query를 사용하여 서버 데이터를 효율적으로 관리하고, 데이터 변이를 통해 상태를 업데이트

---

참고 자료

Tanstack Query 공식문서

---

주절주절

오늘까지만 덥고 내일부터 비가 많이 오겠지..?