[TanStakQuery] 빠른 시작(Quick Start)

이 코드 스니펫은 React 쿼리의 3가지 핵심 개념을 아주 간략하게 설명합니다:

• Queries
• Mutations
• Query Invalidation

완전한 기능을 갖춘 예제를 찾고 계신다면 간단한 simple codesandbox example를 살펴보시기 바랍니다.

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
import { getTodos, postTodo } from '../my-api'

// Create a client
const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

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>
  )
}

render(<App />, document.getElementById('root'))

이 세 가지 개념은 React Query의 핵심 기능 대부분을 구성합니다. 이 문서의 다음 섹션에서는 이러한 핵심 개념 각각에 대해 자세히 설명합니다.

Reference

• Quick Start | TanStack Query Docs