문제발생

팀프로젝트 중에 handleProfileUpdate 함수를 React Query의 useMutation 훅을 활용하여 리팩토링하는 과정에서 닉네임 중복 검사 단계에서 오류가 발생하였다. 닉네임이 이미 존재하는 경우 중복 검사에서 걸러져야 하나, 계속해서 프로필이 업데이트되는 문제가 있었다.

원인추론

useMutation 훅은 기본적으로 mutate와 mutateAsync 두 가지 함수를 제공하였다. mutate 함수는 비동기 작업을 수행하였으나, 이를 호출한 곳에서 해당 작업의 완료를 기다리지 않아 await 키워드를 사용하더라도 결과를 기다리지 않고 다음 코드로 넘어갔다. 이로 인해 닉네임 중복 검사 결과가 처리되기 전에 바로 다음 단계인 프로필 업데이트가 실행되어 중복된 닉네임임에도 불구하고 업데이트가 이루어지는 상황이 발생하였다.

해결과정

문제를 해결하기 위하여 mutate 대신 mutateAsync 함수를 사용하였다. mutateAsync 함수는 Promise를 반환하여 await 키워드를 통해 비동기 작업의 완료를 기다릴 수 있도록 하였다. 이에 따라 닉네임 중복 검사와 프로필 업데이트를 mutateAsync로 변경하였으며, 각 단계의 완료를 보장하고 오류 발생 시 다음 단계로 넘어가지 않도록 수정하였다.

• 변경 전

checkNicknameMutation.mutate(nickname);
updateProfileMutation.mutate(nickname);

변경 전에는 닉네임 중복 검사를 진행한 후 바로 프로필 업데이트가 호출되었으나, 이는 닉네임 중복 검사 결과를 기다리지 않아 중복 체크 실패가 반영되지 않았다.

• 변경 후

await checkNicknameMutation.mutateAsync(nickname);
await updateProfileMutation.mutateAsync(nickname);

반면, 변경 후에는 각 단계마다 await를 사용하여 닉네임 중복 검사 결과가 성공적일 때만 프로필 업데이트가 진행되도록 하였으며, 만약 중복된 닉네임이 감지될 경우 해당 Promise에서 오류가 발생하여 이후 프로필 업데이트가 실행되지 않도록 하였다.

결과

mutate를 mutateAsync로 변경함으로써 각 비동기 작업의 완료를 정확하게 기다릴 수 있게 되었으며, 닉네임 중복 검사에서 오류가 발생할 경우 프로필 업데이트가 실행되지 않도록 제어하였다. 이에 따라 닉네임 중복 검사에서 걸러져야 할 상황에서 프로필이 업데이트되는 문제를 해결하였다.