서버에 데이터를 보내고, UI를 동기화하는 가장 확실한 방법
데이터를 가져오는(Fetching) 것은 이제 익숙하신가요?
하지만 "좋아요" 버튼을 눌렀을 때, 혹은
게시글을 수정했을 때 화면이 바로 바뀌지 않아 당황한
적이 있으신가요?
데이터를 조회하는 것이 useQuery라면, 데이터를 변경(생성,
수정, 삭제)하는 주인공은 바로 useMutation입니다.
사용자의 클릭 한 번으로 서버와 화면을 완벽하게 일치시키는 마법 같은
방법을 소개합니다.
💡 1. useQuery와 무엇이 다른가요?
많은 분들이 처음 접할 때 가장 헷갈려 하는 부분입니다.
간단히 말해, 자동이냐 수동이냐의
차이입니다.
| 구분 | useQuery | useMutation |
|---|---|---|
| 목적 | 데이터 조회 (GET) | 데이터 변경 (POST, PUT, DELETE) |
| 실행 시점 | 컴포넌트 마운트 시 자동 실행 | 사용자 액션(클릭 등) 시 함수 호출 |
| 필요한 것 | 고유한 Query Key 필수 | Key 불필요 (단, 동기화 시 필요) |
즉, 버튼을 클릭했을 때 API를 호출해야 한다면 무조건
useMutation을 사용해야 합니다.
🛠️ 2. 기본 사용법: 3단계 공식
useMutation을 사용하는 과정은 정의 -> 연결 -> 실행의
3단계로 나뉩니다.
간단한 '할 일 추가(Todo Add)' 예제로 살펴볼까요?
mutationFn: (newTodo) => {
return axios.post('/todos', newTodo);
},
onSuccess: () => {
console.log('성공했습니다!');
}
});
// 사용자의 클릭 이벤트 핸들러
const handleClick = () => {
mutate({ title: 'React Query 공부하기' });
}
- KEY 1 mutationFn: 실제로 서버에 요청을 보내는 비동기 함수입니다.
- KEY 2 mutate: 이 함수를 실행해야 요청이 출발합니다.
- KEY 3 onSuccess: 요청이 성공한 직후 실행할 로직을 작성합니다.
🔄 3. 수정 후 화면 갱신: "새로고침 없이"
데이터를 서버에 잘 보냈습니다. 하지만 내 화면 목록에는 아직 반영되지
않았죠?
React Query를 쓰는 진짜 이유는 바로 이
데이터 동기화(Invalidation) 때문입니다.
✨ Query Invalidation (쿼리 무효화)
"기존 데이터는 낡았으니(Invalid), 다시 가져와!"라고 선언하는
방식입니다.
가장 안전하고 널리 쓰이는 패턴입니다.
위 코드를 onSuccess 안에 넣으면 어떻게 될까요?
1. 서버 데이터 수정 완료.
2. 'todos' 키를 가진 데이터가 상했다(낡았다)고 표시.
3. React Query가 알아서
새로운 데이터를 다시 받아옴(Refetch).
4. 사용자는 최신 목록을 보게 됨.
서버 응답을 기다리지 않고, UI를 미리 바꿔버리는 기술입니다. (ex. 인스타그램 좋아요)
사용자 경험(UX)은 좋지만 구현이 복잡하므로, Invalidation부터 마스터하는 것을 추천합니다.
🚀 실천 가이드 및 요약
useMutation은 React 앱에서 사용자의 상호작용을 처리하는 핵심
엔진입니다.
단순히 API를 호출하는 것을 넘어, 상태 관리의 흐름을
제어한다고 생각하세요.
- 데이터 변경이 필요할 땐 useQuery가 아닌 useMutation을 쓴다.
-
요청이 성공하면(
onSuccess) 반드시 관련 Query를 무효화(Invalidate)한다. -
사용자에게 로딩 상태(
isPending)를 보여주어 경험을 개선한다.
지금 바로 여러분의 '저장' 버튼에 useMutation을 연결해 보세요!
댓글 쓰기