Quick Start

아래의 코드는 React Query의 세 가지 핵심 개념을 아주 간단히 설명합니다:

직접 작동시켜볼 수 있는 예제를 찾으신다면 간단한 StackBlitz 예제 (opens in a new tab)를 확인해보세요.

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";
import { getTodos, postTodo } from "../my-api";
 
// 클라이언트를 생성합니다.
const queryClient = new QueryClient();
 
function App() {
  return (
    // 어플리케이션 루트에 클라이언트를 주입합니다.
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  );
}
 
function Todos() {
  // 클라이언트에 접근합니다.
  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의 핵심 기능 대부분을 구성합니다.
문서의 다음 섹션에서는 이러한 핵심 개념 각각에 대해 자세히 설명하겠습니다.

Changed History

2024.08.26. @ubinquitous

[구문] 완전히 작동하는 예제를 원한다면, 작성해둔 → 직접 작동시켜볼 수 있는 예제를 찾으신다면
[주석] Create a client → 클라이언트를 생성합니다.
[주석] Provide the client to your App → 어플리케이션 루트에 클라이언트를 주입합니다.
[주석] Access the client → 클라이언트에 접근합니다.

Installation Devtools