const updateMeetingLocationMutation = useUpdateMeetingLocationMutation();
// 장소 선택 함수
const handleSelectLocation = async (barName: string) => {
setSelectedMeetingLocation(barName);
setIsLocationSelected(!isLocationSelected);
if (!chatRoomId) {
return;
}
if (selectedMeetingLocation === barName) {
const clearMutation = useClearMeetingLocationMutation({ chatRoomId });
try {
await clearMutation.mutateAsync();
} catch (error) {
console.error('미팅장소 삭제 오류:', error);
}
} else {
try {
await updateMeetingLocationMutation.mutateAsync({ chatRoomId, barName });
} catch (error) {
console.error('미팅장소 업데이트 오류:', error);
}
}
};
JavaScript
복사
요약하자면 useUpdateMeetingLocationMutation은 컴포넌트 본체 내에서 직접 사용되기 때문에 최상위 수준에서 선언해야 하고, useClearMeetingLocationMutation은 이벤트 및 React에 대한 응답으로 호출되기 때문에 handleSelectLocation과 같은 중첩 함수 내에서 선언할 수 있습니다.
useUpdateMeetingLocationMutation는 상위에서만 써야함
useClearMeetingLocationMutation 함수 안에서도 잘 작동
둘의 차이는,,,????
1.
useUpdateMeetingLocationMutation: 이 후크는 회의 위치 업데이트를 담당합니다. 이는 일반적으로 변형 작업을 시작하는 데 사용되며 구성 요소 본문 내에서 또는 변형이 발생해야 하는 이벤트 핸들러 내에서 직접 호출될 것으로 예상됩니다. 변형 작업의 상태를 관리하는 후크이므로 다시 렌더링할 때에도 상태가 유지되도록 구성 요소의 최상위 수준에서 선언해야 합니다.
2.
useClearMeetingLocationMutation: 반면에 이 후크는 특히 회의 위치를 지우는 데 사용됩니다. 이는 회의 장소 선택 또는 지우기와 관련된 사용자 상호작용을 처리하는 이벤트 핸들러인 'handleSelectLocation' 함수 내에서 호출됩니다. handleSelectLocation이 구성 요소 본문 내에서 호출되는 동안 useClearMeetingLocationMutation 자체는 다시 렌더링 간에 지속되어야 하는 상태를 관리하지 않습니다. 필요할 때 회의 장소를 지우기 위해 돌연변이 작업을 시작하는 데만 사용됩니다.
요약하면 'useUpdateMeetingLocationMutation'은 모임 위치 업데이트와 관련된 상태를 관리하는 역할을 하며 구성 요소의 최상위 수준에서 선언되어야 합니다. 반면 useClearMeetingLocationMutation은 이벤트 핸들러 내에서 사용되며 다시 렌더링 간에 지속되어야 하는 상태를 관리하지 않으므로 React의 후크 규칙을 위반하지 않고 해당 이벤트 핸들러 내에서 선언할 수 있습니다.
하지만,, 결국 build시 오류 나니 때문에 useClearMeetingLocationMutation 이것도 최상위로 뺐다…