4.11 바로 투두 삭제가 안됨 질문

Question

투두 삭제할 때 mutation 부분 코드를 강의와 똑같이 // use-delete-todo-mutation.ts export function useDeleteTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: deleteTodo, onSuccess: (deletedTodo) => { queryClient.setQueryData(QUERY_KEYS.todo.list, (prevTodos) => { if (!prevTodos) return []; return prevTodos.filter((prevTodo) => prevTodo.id !== deletedTodo.id); }); }, }); } 이렇게 치면 바로 삭제가 안 되고 새로고침해야 적용이되는데 export function useDeleteTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: deleteTodo, onSuccess: (_data, deletedId) => { queryClient.setQueryData(QUERY_KEYS.todo.list, (prevTodos) => { if (!prevTodos) return []; return prevTodos.filter((prevTodo) => prevTodo.id !== deletedId); }); }, }); } 이렇게 작성하면 바로 삭제 적용이 됩니다. 무슨 차이가 있는 걸까요?? 그리고 강의에 왜 처음 코드는 바로 삭제 반영이 안 되는 건지 궁금합니다 ㅜㅜ!

winterlood · Answer

안녕하세요 보내주신 코드 잘 확인해봤습니다. 확인해보니 json-server의 버전이 과거의 버전으로 설치되어 있더군요 npm uninstall json-server로 제거하신 다음, npm i json-server로 최신 버전을 설치해 다시 사용해주시면 정상적으로 작동하게 될 겁니다 😀

winterlood · Answer

안녕하세요 으악님 이정환입니다. 혹시 deleteTodo 함수의 반환값이 다음과 같이 잘 설정이 되어 있는 상황일까요? import { API_URL } from "@/lib/constants"; import type { Todo } from "@/types"; export async function deleteTodo(id: string) { const response = await fetch(`${API_URL}/todos/${id}`, { method: "DELETE", }); if (!response.ok) throw new Error("Delete Todo Failed"); const data: Todo = await response.json(); return data; } 강의에서 안내드린 것 처럼 deleteTodo 함수가 삭제된 아이템을 반환하지 않을 경우 onSuccess 함수에 매개변수로 삭제된 아이템이 제공되지 않을 수 있습니다. 이 부분을 확인해보셔야 할 듯 싶습니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 으악님. 질문에서 주신 문제는 deleteTodo 함수를 통한 mutation에서 onSuccess 콜백의 파라미터 사용 차이에서 비롯된 것 같습니다. 문제의 원인 첫 번째 코드 : onSuccess 의 첫 번째 파라미터 deletedTodo 가 사용되었습니다. 이 경우는 mutationFn ( deleteTodo )의 반환 값을 deletedTodo 로 받습니다. 만약 deleteTodo 함수가 반환하는 데이터에 id 속성이 포함되어있지 않은 경우, deletedTodo.id 는 예상대로 작동하지 않을 수 있습니다. 두 번째 코드 : onSuccess 의 두 번째 파라미터 deletedId 를 사용하셨습니다. deletedId 는 mutation.mutate 호출 시 전달한 파라미터로, 삭제할 때 명시적으로 삭제할 ID를 가져와 사용합니다. 요약 첫 번째 코드 에서는 deleteTodo 함수의 반환 값에 따라 deletedTodo.id 를 사용할 수 있습니다. 만약 deleteTodo 에서 반환하는 객체가 예상과 다르다면, 빈 필터링 결과가 나오게 됩니다. 두 번째 코드 에서는 mutation.mutate 호출 시 넘겨준 deletedId 를 사용하여 안전하게 필터링 되며, 이 방식은 deleteTodo 함수의 반환 값에 의존하지 않습니다. 해결 방안 deleteTodo 함수가 제대로된 객체(즉, id 가 포함된)를 반환하는지 확인하거나, 두 번째 코드와 같이 명시적으로 ID를 사용할 수 있습니다. 이러한 차이로 인해 두 코드간에 동작 차이가 생긴 것으로 보입니다. 여러분의 이해를 돕기 위해 관련 질문 URL을 함께 공유드립니다: 관련 질문: React Query에서 onSuccess와 onError 콜백 함수 사용 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.