51. 심화 프로젝트 - 생성, 갱신

Mission: 심화 프로젝트에서 맡은 기능(Create, Update)을 하며 발생한 오류 및 개념 정리

에러

addData 충돌 문제

원인:
addData 식별자가 이미 사용되었는데 다시 선언하여 충돌이 발생한다.

해결방안:
1. Edit.js 파일에서 addData 식별자 선언을 확인하고, 이미 선언된 변수인지 확인한다.
2. 변수 이름을 변경하여 충돌을 해결한다.

import React, { Fragment } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useQuery, useMutation, useQueryClient } from "react-query";
import axios from "axios";
import { validateInputAndAlert } from "../redux/validationUtils";
import * as S from "../styles/style.edit";
function Edit() {
  const navigate = useNavigate();
  const { id } = useParams();
  const queryClient = useQueryClient();
  // 이미 addData 식별자가 사용되었으므로 변경해야 함
  const modifyDataMutation = useMutation(
    async (updatedBalance) => {
      await axios.put(`http://localhost:4000/balances/${id}`, updatedBalance);
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries("posts");
        window.alert("수정되었습니다.");
        navigate("/");
      },
    }
  );
  const handleEditSubmit = (e) => {
    e.preventDefault();
    const title = e.target.title.value;
    const content = e.target.content.value;
    const choice1 = e.target.choice1.value;
    const choice2 = e.target.choice2.value;
    if (validateInputAndAlert(title, content, choice1, choice2)) {
      return;
    }
    const updatedBalance = { ...balance, title, content, choice1, choice2 };
    modifyDataMutation.mutate(updatedBalance); // addData 대신 modifyDataMutation 사용
  };
  // ...
}

개념

1. React Query와 useQuery, useMutation

• React Query는 데이터 패칭 및 관리를 위한 라이브러리이다.
• useQuery 훅은 데이터를 패칭하고 캐시된 데이터를 가져오는데 사용된다.
• useMutation 훅은 데이터 변경 작업을 수행하고 성공 시 캐시를 업데이트한다.

import { useQuery, useMutation } from "react-query";
// useQuery 사용 예시
const { data, isLoading, error } = useQuery("post", async () => {
  const response = await fetch("apiEndpoint");
  return response.json();
});
// useMutation 사용 예시
const updateMutation = useMutation(
  async (updatedData) => {
    await axios.put("apiEndpoint", updatedData);
  },
  {
    onSuccess: () => {
      queryClient.invalidateQueries("posts");
      window.alert("수정되었습니다.");
    },
  }
);

2. useParams와 useNavigate 사용

• useParams는 React Router의 동적 라우팅에서 URL의 동적 변수 값을 가져오는 훅이다.
• useNavigate는 프로그래밍적으로 라우팅을 제어하기 위한 훅이다.

import { useParams, useNavigate } from "react-router-dom";
// useParams 사용 예시
const { id } = useParams(); // 동적 변수(id) 값을 가져옴
// useNavigate 사용 예시
const navigate = useNavigate();
navigate("/path"); // 경로 이동