데이터를 useMutation으로 가져오는 건 괜찮을까?

일반적으로 React Query의 useMutation은 서버에 데이터를 전송(POST, PUT, DELETE 등) 하는 작업에 사용합니다.
반대로 데이터를 가져오는 작업(FETCH) 은 useQuery로 처리하는 것이 표준적인 방식입니다.

하지만 특정 상황에서는 useMutation을 사용해서 데이터를 가져오는 것이 더 적절한 경우도 존재합니다.

 

🧩 상황 설명: 버튼 클릭 시 조건에 따라 API 호출이 필요한 케이스

현재 진행 중인 프로젝트에서는 버튼 클릭 이벤트를 통해 특정 플래그 값을 기준으로 다음 동작을 결정해야 했습니다.

이러한 경우 useQuery는 컴포넌트 마운트 시점에 자동 실행되기 때문에,

사용자 액션에 따라 조건부로 실행되는 useMutation이 더 적합했습니다.

---

🛠️ 실제 구현 예시

// React Query Mutation 훅 정의
export const useTicketAvailable = () => {
  return useMutation(async (goodsCode: string) => {
    const result = await getTicketAvailable(goodsCode);
    return result.data;
  });
};

// 사용 예시
const MyComponent = (props) => {
  const ticketMutation = useTicketAvailable();

  const handleEnter = async () => {
    try {
      const data = await ticketMutation.mutateAsync(props.ticketOption.goodsCode);

      if (data.availableFlag) {
        // 입장 가능
      } else {
        // 입장 불가 처리
        notify({
          type: 'success',
          message: '입장이 불가능한 상태입니다.',
        });
      }
    } catch (error) {
      console.error('에러 발생:', error);
    }
  };

  return <button onClick={handleEnter}>입장하기</button>;
};

 

---

📌 정리

• useMutation은 일반적으로 데이터를 "보내는" 작업에 사용
• 하지만, 버튼 클릭 시 데이터 요청 등 사용자 액션 기반 요청에는 useMutation을 활용할 수 있음
• 단 이 방식은 특수한 경우에 한정되며 가능한 한 useQuery를 기본으로 사용하되 상황에 따라 유연하게 선택하는 것이 좋음