hcmc 백엔드 데이터 전송

hcmc 프로젝트 중에서 백엔드로 데이터 전송하는 법을 몰랐었다. 이제까지 api를 만들어서 보내는 방법은 알았지만, 데이터를 중간에 전송하는 방법을 몰랐는데, 오늘 구현했다. 하지만 문제는 데이터를 전송하면 페이지가 끊긴다. 데이터를 전송해도 페이지 초기화가 되지 않도록 해야한다.

여기 있는 추가 버튼을 누르면 <form>이 전송되는데, 이때 데이터를 어떻게 넣을지 고민을 하던 중, <form>이 MongoDB로 전송된다.

const AccountInsert = ({ insertRow }) => {
  const [value, setValue] = useState({
    date: "",
    category: "",
    title: "",
    amount: "",
    tag: "",
});

const inputHandler = (e) => {
  setValue({ ...value, [e.target.name]: e.target.value });
};

redux를 사용해서 기본 값에 객체를 넣어준 뒤, inputHandler() 안에서 들어갈 구조를 설정해준다. ...value을 통해서 나열하지 않아도 값이 들어가도록 하고, e.target.name: e.target.value를 통해 key: value가 들어가도록 했다.

다음으로 submitHandler를 작성해서 MongoDB로 데이터가 들어갈 수 있도록 하고, <form>이 전송될 수 있도록 했다.

const submitHandler = (e) => {
  e.preventDefault();

    if (
      value.date.trimEnd() === "" ||
      value.category.trimEnd() === "" ||
      value.title.trimEnd() === "" ||
      value.amount.trimEnd() === "" ||
      value.tag.trimEnd() === ""
    ) {
      return alert("모든 정보를 입력해주세요.");
    }
  
  	const newRow = {
      date: value.date,
      title: value.title,
      category: value.category,
      amount: parseInt(value.amount),
      tag: value.tag,
    };
    insertRow(newRow);
  
	const sendData = async (data) => {
      try {
        const response = await axios.post(
          "http://localhost:4000/wallet/money",
          data,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        console.log(response.data);
        window.location.reload();
      } catch (err) {
        console.error(err);
      }
    };
  
    sendData([newRow]); // 데이터를 백엔드로 전송
  
	setValue({
      date: " ",
      category: " ",
      title: " ",
      amount: " ",
      tag: " ",
    });
};

e.preventDefault()로 데이터가 <input>이 전송되도 넘어가지 않도록 하는데, 실제로는 값이 넘어간다. 코딩애플 강의 듣다보면 어딘가 데이터가 새로 들어가도 페이지를 새로고침하지 않고 넘길 수 있는 방법이 있었는데, 글 작성하고 한번 봐야겠다.

newRow()를 만들어서 input의 value로 들어온 값을 객체로 받고, 부모 함수 AccountInsert()의 인자로 받은 { insertRow(newRow) }함수의 인자로 받게 해준다. 즉 input될 때, <input>에 넣은 값들이 들어가게 하는 함수이다.

sendData(data)함수를 만들어서 axios로 데이터를 백엔드로 전송하도록 해준다. 미리 만들어놓은 backend/routes/wallet/money api로 데이터를 전송하도록 한다. 아까 input에서 만든 값을 data로 받고, 전송한 뒤에는 window.location.reload()로 페이지를 다시 로딩하도록 해준다.
그리고 sendData([response.data])함수를 호출해서 데이터를 전송하고, setValue를 초기화해준다.

return (
    <form
      className="AccountInsert"
      onSubmit={submitHandler}
      target="insertSubmit"
    >
      <label className="inputDate">
        <h3>Date</h3>
        <input type="date" name="date" onChange={inputHandler} />
      </label>

      <label className="inputSelect">
        <h3>Category</h3>
        <select
          name="category"
          value={value.category}
          onChange={inputHandler}
          required
        >
          <option value="" disabled>
            지출
          </option>
          <option>식비</option>
          <option>생필품</option>
          <option>문화/교육비</option>
          <option>기타</option>
          <option>저축</option>
          <option value="" disabled>
            수입
          </option>
          <option>월급</option>
          <option>기타소득</option>
        </select>
      </label>
      <label className="inputTitle">
        <h3>Title</h3>
        <input
          type="text"
          name="title"
          value={value.title}
          onChange={inputHandler}
        />
      </label>

      <label className="inputNumber">
        <h3>Amount</h3>
        <input
          type="number"
          name="amount"
          value={value.amount}
          onChange={inputHandler}
        />
      </label>

      <label className="radioBtn">
        <RadioGroup
          row
          aria-labelledby="demo-row-radio-buttons-group-label"
          name="tag"
          value={value.tag}
          onChange={inputHandler}
        >
          <FormControlLabel
            value="수입"
            control={<Radio size="small" />}
            label="수입"
            labelPlacement="start"
          />
          <FormControlLabel
            value="지출"
            control={<Radio size="small" />}
            label="지출"
            labelPlacement="start"
          />
        </RadioGroup>
      </label>

      <Button variant="contained" className="submitBtn" type="submit">
        추가
      </Button>
    </form>
  );

<form>은 전송될 때 아까 작성한 Onsubmit={submitHandler}가 전송되도록 한다.
<label>안의 내용으로는 [Date, Category, Title, Amount]을 만들어준뒤 각 데이터들은 사용자가 옵션을 선택할 때마다 onChange={inputHandler} 함수를 호출해서 상태를 업데이트 해주고 e.target.value로 들어가도록 한다.