[useMutation] 매개변수 타입 처리: 한 개와 여러 개의 차이점

React Query의 useMutation은 서버와의 데이터를 변경하는 작업(POST, PUT, DELETE 등)을 처리하는 데 강력한 도구입니다. 이 글에서는 useMutation의 매개변수 타입이 한 개인 경우와 두 개 이상인 경우를 비교하며, 어떤 상황에서 어떤 방식이 더 적합한지 설명합니다.

(매개변수 처리 방식은 useMutation뿐만 아니라 함수 설계 전반에서 고려해야 할 중요한 요소입니다.)

 

■ 매개변수가 두 개인 경우

return useMutation<String, Error, { sendData: RouteData; user: UserFormData }>({
  mutationFn: ({ sendData, user }) => route(sendData, user),
  onSuccess: (data) => {
  },
  onError: () => {
  },
});

// 호출
mutate({ sendData: routeData, user: userData });

• mutationFn의 매개변수가 두 개 이상인 경우, 객체로 묶어서 처리해야 합니다.
• 제네릭의 세 번째 인자에 { sendData: RouteData; user: UserFormData }와 같은 객체 타입을 정의해야 합니다.

장점

1. 매개변수 확장성
   • 여러 매개변수를 객체로 묶어 전달하므로, 매개변수를 추가하거나 변경하기 쉬움.
2. 명시적 전달
   • 호출부에서 각 매개변수의 의미를 명확히 알 수 있음.

단점

1. 코드가 길어짐
   • mutationFn에서 매개변수를 객체로 분해하고 타입을 정의해야 하므로 코드가 다소 복잡해질 수 있음.
2. 가독성 저하
   • 간단한 API 호출에도 불필요한 객체 구조가 추가될 수 있음.

 

■ 매개변수가 한 개인 경우

return useMutation<String, Error, RouteData>({
  mutationFn: joinRoute,
  onSuccess: (data) => {
  },
  onError: () => {
  },
});

// 호출
mutate(sendData);

 

• mutationFn의 매개변수가 단일 타입(RouteData)로 처리됩니다.
• 제네릭의 세 번째 인자에 RouteData 타입만 지정하면 됩니다.

장점

1. 간결한 코드
   • mutationFn에 API 호출 함수명만 지정하면 되므로 코드가 간단하고 가독성이 좋아짐.
2. 타입 정의가 간단
   • 매개변수가 한 개라면, 타입 정의와 호출부 모두 최소화 가능.
3. 가독성 향상
   • 호출부와 mutationFn 모두 간단해져 코드를 읽기 쉽습니다.

단점

• 매개변수가 늘어나는 경우, 기존 구조를 변경해야 할 수 있음.

 

■ 매개변수 타입 처리 비교

특성매개변수	매개변수 1개	매개변수 2개 이상
코드 간결성	매우 간결	비교적 길어질 수 있음
가독성	좋음	매개변수가 많아지면 가독성이 저하될 수 있음
확장성	매개변수 추가 시 구조 변경 필요	매개변수를 객체로 묶으므로 확장성이 높음
적합한 상황	매개변수가 한 개로 충분한 경우	매개변수가 두 개 이상이거나 추가될 가능성이 높은 경우

 

어떤 방식을 선택해야 할까?

매개변수가 한 개인 경우

• 매개변수가 한 개인 경우에는 단일 타입으로 처리하고, mutationFn에 메서드명만 전달하는 방식이 좋습니다.
• 이유:
  • 코드가 간결하고 가독성이 높습니다.
  • 불필요한 객체 분해와 타입 정의를 피할 수 있습니다.

매개변수가 두 개 이상인 경우

• 매개변수가 두 개 이상이라면, 객체로 묶어서 전달해야 합니다.
• 이유:
  • 매개변수를 객체로 처리하면 순서에 민감하지 않으며, 추가 매개변수를 더 쉽게 확장할 수 있습니다.
  • 호출부에서 매개변수의 의미를 명확히 표현할 수 있습니다.

추천

• 매개변수가 한 개로 충분히 처리 가능한 경우, 타입과 호출부를 간결하게 유지하기 위해 단일 타입으로 작성하세요.
• 매개변수가 두 개 이상이거나 확장 가능성이 있는 경우, 객체 타입으로 처리하는 것이 유지보수에 유리합니다.