지출 내역 리스트 기능 추가하기 : 5 - 4

기존 지출 내역 리스트에 기능 추가하기

구현 순서

1. 회원가입, 로그인 페이지 및 폼의 UI 생성
2. jwt 인증서버를 사용한 회원가입, 로그인 기능 추가 및 인증 상태 관리
3. 내비게이션 바 생성 및 라우터 설정
4. 프로필 수정 페이지 생성 및 프로필 수정 기능 추가
5. json-server와 Tanstack Query를 사용해 지출 CRUD 구현
6. 이후 디테일한 부분 및 선택 구현 사항 다루기

5. json-server와 Tanstack Query를 사용해 지출 CRUD 구현 - 4 (지출내역 수정 및 삭제)

수정과 삭제는 지출 내역 상세페이지에서 할 수 있음

또 useMutation에 수정, 삭제 함수 넣어주고 갱신이나 홈화면으로 이동시키면 끝

src/components/detail/DetailExpense.jsx

수정

수정 관련 로직

	// useParams를 이용해서 현재 지출 데이터의 id를 가져옴 (수정, 삭제에 필요)
    const currentId = useRef(useParams().postId).current;
    
    // useQuery를 이용해서 특정 데이터만 불러오는 함수를 넣어줌
    // queryKey 배열에 현재 id도 넣어줌
	// 현재 해당하는 id를 가진 지출 데이터를 불러와 prevExpense의 배열에 담음
    const { data: prevExpense = [], isPending, isError } = useQuery({
        queryKey: ["expenses", currentId],
        queryFn: fetchExpense,
    });
    
    // mutationFn에 수정 함수를 넣어줌
    // 수정에 성공하면 지출 데이터를 갱신시켜주고 홈화면으로 돌아옴
    // 갱신을 안해주면 똑같은 지출 상세페이지에 들어갔을 때
    // 수정하기 전의 내용이 나옴 (새로고침해야만 수정 내용 반영) 
    const queryClient = useQueryClient();
    const editMutation = useMutation({
        mutationFn: editExpense,
        onSuccess: () => {
            navigate("/");
            queryClient.invalidateQueries(["expenses"]);
        },
    });
    
    // 수정 로직
    const handleUpdate = (event) => {
        event.preventDefault();
        const id = currentId;
        const formData = new FormData(event.target);
        const date = formData.get("date");
        const month = date.slice(5, 7);
        const item = formData.get("item");
        const amount = formData.get("amount");
        const description = formData.get("description");
        const createdBy = prevExpense.createdBy;

        if (!date.trim()) {
            setIsBtnOpen(false);
            setModalMsg("유효한 날짜를 입력해주세요!");
            return setOpenModal(true);
        }
        if (!item.trim()) {
            setIsBtnOpen(false);
            setModalMsg("유효한 항목을 입력해주세요!");
            return setOpenModal(true);
        }
        if (!amount.trim() || +amount < 0) {
            setIsBtnOpen(false);
            setModalMsg("유효한 금액을 입력해주세요!");
            return setOpenModal(true);
        }
        if (!description.trim()) {
            setIsBtnOpen(false);
            setModalMsg("유효한 내용을 입력해주세요!");
            return setOpenModal(true);
        }

        const newExpense = {
            id,
            month: +month,
            date,
            item,
            amount: +amount,
            description,
            createdBy,
        };

        editMutation.mutate(newExpense);
    }

삭제

삭제 관련 로직

	// mutationFn에 삭제 함수를 넣어주고
    // 삭제에 성공하면 굳이 갱신시킬 필요없이 홈화면으로 이동
    // => 반영 잘 됨
    const deleteMutation = useMutation({
        mutationFn: deleteExpense,
        onSuccess: () => {
            navigate("/");
        },
    });
    
    const handleDelete = () => {
        deleteMutation.mutate(currentId);
    }

 

결과

추가할 때처럼 그냥 mutationFn에 수정, 삭제 함수 넣어주고 갱신시키고 홈화면으로 이동하면 끝