[React]form태그 비제어

전에 프로젝트에서 form태그에 핸들링을 useState로 관리했는데, 이를 더 간략하게 해주는게 있었따!!!

//전
const initialInputValue = {
  country: "",
  gold: 0,
  silver: 0,
  bronze: 0,
};
const handlSubmitToAdd = (e) => {
    e.preventDefault();
    const newValue = {
      ...overallInputData,
      id: Date.now(),
    };
    setSavedData([...savedData, newValue]);
    initState();
  };

  const handleChange = (e) => {
    setOverallInputData({
      ...overallInputData,
      [e.target.name]: e.target.value,
    });
  };
  ...
  <input
    key={i}
    type={i === 0 ? "text" : "number"}
    value={overallInputData[title]}
    name={title}
    maxLength={i === 0 ? null : 2}
    onChange={handleChange}
    onInput={i === 0 ? null : handleInput}
    placeholder={title}
    required
  />

 

☝️이랬던 코드를 newForm객체와 reset()메소드를 사용하여 밑에 코드처럼 간략하게 바꿨다!

//후
const handlSubmitToAdd = (e) => {
    e.preventDefault();

    const fd = new FormData(e.target);
    const data = Object.fromEntries(fd.entries());

    const newValue = {
      ...data,
      id: Date.now(),
    };
    setSavedData([...savedData, newValue]);

    e.target.reset(); 
  };
  ...
  <input
    key={i}
    type={i === 0 ? "text" : "number"}
    name={title}
    maxLength={i === 0 ? null : 2}
    onInput={i === 0 ? null : handleInput}
    placeholder={title}
    required
  />