<aside> 📃
React Query 시리즈
React Query로 상태 관리와 성능 최적화하기 1: React Query 소개
React Query로 상태 관리와 성능 최적화하기 2: useQuery
React Query로 상태 관리와 성능 최적화하기 3: useInfiniteQuery
React Query로 상태 관리와 성능 최적화하기 5: useQuery, useMutation 차이
</aside>
useQuery와 useMutation의 코드 차이는 각각의 훅이 설계된 목적과 용도에서 비롯된다. useQuery는 데이터를 읽어오는 작업에 특화되어 있어서 캐싱, 자동 재시도, 백그라운드 업데이트 등 다양한 기능이 내장되어 있다. 따라서 enabled나 retry 같은 옵션들이 필요한 경우가 많다.
반면 useMutation은 데이터를 수정하는 작업에 초점을 맞추고 있다. 수정 작업은 보통 한 번만 실행되고 결과를 캐싱할 필요가 없으며, 자동으로 다시 시도하는 것이 위험할 수 있다. 예를 들어 결제나 포스팅 같은 작업이 실패했을 때 스스로 재시도하게 되면 의도치 않은 중복 처리가 발생할 수 있다.
이런 특성 차이로 인해 useMutation은 더 단순한 설정만으로도 동작이 가능하다. 기본적으로 mutationFn만 정의하면 되고, 필요한 경우에만 onSuccess나 onError 같은 콜백을 추가하면 된다. 우리의 조회수 증가 API도 단순히 서버에 요청을 보내고 성공/실패 여부만 확인하면 되는 작업이므로, useMutation을 사용했을 때 불필요한 옵션들을 제거할 수 있었다.
// useQuery의 주요 반환값
const { data, isLoading, error, refetch } = useQuery(...)
// useMutation의 주요 반환값
const { mutate, mutateAsync, isLoading, error } = useMutation(...)