TanStack Query

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그

[React-Query] React-Query 개념잡기

강의에서 사용된 코드

: 이번 강좌에서 작성된 코드입니다. 강의 내용을 따라하시는데 참고해주시면 됩니다 🙂

https://github.com/lopun-lecture/inflearn-next-tutorial/commit/40a4fae498646fd84901bc62c9d2fc6d9e90fb9f

npm install react-query

useQuery

useQuery는 데이터를 가져오는 작업에 사용됩니다. 기본적으로 다음과 같이 사용할 수 있습니다:

import { useQuery } from 'react-query'

function TodosPage() {
  const todosQuery = useQuery({
    queryKey: ["todos"],
    queryFn: () => getTodos(),
  })
  
  // ... return ...
}

이 예제에서 useQuery는 두 개의 인수를 받습니다: 쿼리 키와 데이터를 가져오는 함수입니다.

useMutation

useMutation은 데이터를 변경하는 작업(예: POST, PUT, DELETE)에 사용됩니다. 다음과 같이 사용할 수 있습니다:

import { useMutation, useQueryClient } from 'react-query'

function TodosPage() {
  const createTodoMutation = useMutation({
    mutationFn: async () => {
      if (todoInput === "") throw new Error("TODO를 입력해주세요");
      return createTodo(todoInput);
    },
    onSuccess: (TODOS) => {
      todosQuery.refetch();
      // queryClient를 사용해서 쿼리 캐시를 날릴 수도 있습니다.
      // queryClient.invalidateQueries(["todos"]);
    },
    onError: (error: any) => {
      alert(error.message);
    },
  });
  
  // ... return ...
}