[React] 리액트 쿼리 - useMutation, useQueryClient

 

React Query

useMutation은 React Query 라이브러리의 일부로, API 호출 또는 데이터 수정 작업을 처리하는 데 사용됩니다.

 

리액트 쿼리 예제.

- TODO LIST 만들기

 

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

function TodoApp() {
  const queryClient = useQueryClient();

  // useMutation 훅을 사용하여 새로운 할 일을 생성하는 함수를 생성합니다.
  const createTodoMutation = useMutation(newTodo => {
    // 여기서는 실제로 API 호출하는 대신에 예시 데이터를 사용합니다.
    const response = { id: Date.now(), text: newTodo, completed: false };
    return response;
  }, {
    // 작업이 성공한 후에 실행될 콜백 함수입니다.
    onSuccess: () => {
      // 새로운 할 일이 추가되었으므로 쿼리를 업데이트합니다.
      queryClient.invalidateQueries('todos');
    }
  });

  const handleAddTodo = async () => {
    const newTodo = prompt('Enter a new todo:');
    if (newTodo) {
      // useMutation 훅에서 생성한 함수를 호출하여 할 일을 생성합니다.
      await createTodoMutation.mutateAsync(newTodo);
    }
  };

  return (
    <div>
      <button onClick={handleAddTodo}>Add Todo</button>
      {createTodoMutation.isLoading ? (
        <div>Adding todo...</div>
      ) : (
        <div>Todo added!</div>
      )}
    </div>
  );
}

export default TodoApp;

-  이 함수는 비동기 작업을 수행하고 그 결과를 처리합니다. 

- 작업이 성공적으로 완료되면 onSuccess 콜백이 호출되어 React Query의 캐시를 업데이트하고, 이로 인해 UI가 자동으로 업데이트됩니다.

리액트 쿼리 사용 이유

- API 호출, 데이터 캐싱, 상태 관리 등을 단순화합니다. 

- 데이터를 가져오고 관리하는 데 필요한 복잡한 로직을 간소화합니다.

- React Query는 API 응답을 자동으로 캐시하여 중복 요청을 방지합니다.

- 백그라운드에서 주기적으로 데이터를 업데이트하여 최신 정보를 유지합니다.