1. 문제 발생❓
- 댓글 수정 기능 구현 중 UI 반응성 문제 발생
- 수정 버튼 클릭 후 프로세스(문제 과정 설명)
- 수정 후 완료 버튼 누르기
- 수정 모드 종료
- 기존 값 유지
- 몇초 후 수정된 값으로 변경됨
2. 원인 추론 🔎
- 서버 응답을 기다린 후 UI 업데이트
- React Query의 기본 동작을 그대로 사용
- 원래 코드(주요 부분)
const { mutate: edit } = useMutation({
mutationFn: ({ id, text }) => updateComment({ id, text }),
onSuccess: () => {
queryClient.invalidateQueries(["comments"]);
alert("댓글이 수정되었습니다!");
}
});
const handleEditSubmit = (e) => {
e.preventDefault();
if (editingComment.text.trim() !== "") {
edit({ id: editingComment.id, text: editingComment.text });
}
setEditingComment(null, "");
};
3. 해결 과정 📋
- 낙관적 업데이트(Optimistic Updates) 개념 학습
- Tanstack Query의 onMutate 콜백 활용
- 서버 응답 전 캐시 데이터 즉시 업데이트
- Optimistic Updates 채택 이유 ⭐⭐⭐⭐⭐
- 즉각적인 사용자 피드백: 사용자는 액션의 결과를 즉시 볼 수 있어 반응성 있는 UI 경험을 제공한다.
- 네트워크 지연 극복: 서버 응답을 기다리지 않고 UI를 먼저 업데이트 하므로. 느린 네트워크 환경에서도 앱이 빠르게 반응하는 것처럼 보인다.
- 수정된 코드
// 댓글 수정 (낙관적 업데이트 적용)
const { mutate: edit } = useMutation({
mutationFn: updateComment,
onMutate: async ({ id, text }) => {
// 이전 쿼리 데이터 취소
await queryClient.cancelQueries(["comments", placeId]);
// 이전 값의 스냅샷 저장
const previousComments = queryClient.getQueryData(["comments", placeId]);
// 새 댓글로 캐시를 즉시 업데이트
queryClient.setQueryData(["comments", placeId], (old) =>
old.map((comment) => (comment.id === id ? { ...comment, text } : comment))
);
// 수정 모드 즉시 종료
setEditingComment(null, "");
// 이전 값 오류때 쓸 수도 있으니 리턴해줌
return { previousComments };
},
onError: (err, newComment, context) => {
//에러가 발생하면 이전 값으로 콜백
queryClient.setQueryData(["comments", placeId], context.previousComments);
alert("댓글 수정 중 오류 발생했습니다!" + err.message);
},
onSettled: () => {
// 성공 여부와 관계없이 쿼리를 다시 불러옴
queryClient.invalidateQueries(["comments", placeId]);
}
});
// 댓글 수정 제출 핸들러 함수
const handleEditSubmit = (e) => {
e.preventDefault();
if (editingComment.text.trim() !== "") {
edit({ id: editingComment.id, text: editingComment.text });
}
setEditingComment(null, "");
};
4. 결과 ❤🔥
- 즉각적인 UI 업데이트로 사용자 경험 개선
- 수정 버튼 클릭 시 즉시 변경된 내용 반영
- 네트워크 지연에 관계없이 반응성 있는 인터페이스 제공
- 오류 발생 시 이전 상태로 자동 롤백
5. 교훈 및 느낀점 📝
- Optimistic Updates의 중요성을 인식
- 사용자 경험을 고려한 UI 설계의 중요성
- Tanstack Query의 고급 기능 활용으로 코드 품질 향상
'팀프로젝트' 카테고리의 다른 글
Git 트러블슈팅: rebase 문제 해결과 안전한 Git 사용법🌟 (0) | 2024.10.15 |
---|---|
아웃소싱 팀프로젝트(Park FInder) 최종 발표 (1) | 2024.09.23 |
맛집 뉴스피드 프로젝트 마무리 및 KPT회고 (10) | 2024.09.04 |
맛집 뉴스피드 프로젝트 중간점검 (8) | 2024.09.02 |
뉴스피드 프로젝트 작성폼 페이지 구현하기 (3) | 2024.08.30 |