React-Query를 사용하여 병렬로 여러 개의 변형(Mutations) 처리하는 방법

React-Query와 병렬로 여러 개의 돌발 변이 처리하는 방법

React-Query와 함께 작업하면서 여러 개의 돌발 변이를 병렬로 수행해야 하는 경우, 이 튜토리얼에서는 처리과정을 안내합니다. mutateAsync와 Promise.all의 힘을 활용하여 여러 개의 돌발 변이를 효율적으로 처리하고 병렬로 실행할 수 있습니다. 시작해봅시다!

사용자 정의 useMutation Hook 설정하기

우선, 사용자 정의 useMutation Hook을 설정해봅시다. 이 Hook은 돌발 변이 로직을 추상화하고 돌발 변이를 효율적으로 수행하기 위해 필요한 함수와 상태를 제공합니다:

const { 
  status: updateScheduleStatus,
  reset: updateScheduleReset,
  mutateAsync: updateSchedule,
} = useUpdateSchedule(queryClient, jobId);

이를 통해 updateSchedule 함수를 설정하고, 이를 사용하여 돌발 변이를 수행할 수 있습니다.

병렬로 돌발 변이 수행하기

여러 개의 돌발 변이를 병렬로 실행하기 위해 Promise.all 함수를 사용할 것입니다. 다음은 이를 실현하는 예시입니다:

const mutations = [];

schedulesForDeletion.forEach(async (schedule) => {
  const resp = await monitoringService?.getSchedule(schedule.schedule_id);
  mutations.push(
    updateSchedule({
      monitoringService: monitoringService as MonitoringServiceClient,
      schedule,
      etag: resp?.type === "data" ? resp.headers.etag : "",
    }),
  );
});

await Promise.all(mutations);

이 코드 조각에서는 schedulesForDeletion 배열을 반복하면서 updateSchedule이 반환한 돌발 변이 프로미스를 mutations 배열에 넣습니다. await Promise.all(mutations)를 사용함으로써 모든 돌발 변이가 병렬로 실행되며, 프로그램은 모든 돌발 변이가 완료될 때까지 대기합니다.

React-Query 대 Axios

React-Query로 이 시나리오를 처리할지, 아니면 직접 Axios를 사용할지에 대해 고민할 수 있습니다. React-Query의 내장된 mutateAsync 함수는 돌발 변이를 처리하기 위한 간단하고 편리한 방법을 제공합니다. 또한, 돌발 변이가 성공했을 때 쿼리를 쉽게 무효화할 수 있는 기능을 제공하기 때문에 매우 유용합니다. 이러한 이점을 고려하여 병렬 돌발 변이 처리에는 React-Query를 사용하는 것을 권장합니다.

결론

이 튜토리얼에서는 React-Query를 사용하여 여러 개의 돌발 변이를 병렬로 처리하는 방법을 배웠습니다. mutateAsync 함수와 Promise.all의 힘을 활용하여 여러 개의 돌발 변이를 효율적으로 실행하고, 병렬로 실행되도록 할 수 있었습니다. 이 접근 방식은 성능을 개선하고 돌발 변이를 원활하게 처리할 수 있도록 해줍니다. 그러니 React-Query의 힘을 활용하여 병렬 돌발 변이 처리를 진행해보세요!

추가 질문이나 도움이 필요하신 경우 언제든지 문의해주세요. 즐거운 코딩되세요!

참고 자료 : 

reactjs