React에서 formData 코드 간소화하기

한 폼의 여러 input의 변경을 관리하기 위해 onChangeHandler  같은 함수를 만들어 사용할 수 있다.

 

// form.tsx
<Container onSubmit={(e) => onSubmitHandler(e, dispatch)}>
      <input
        type="text"
        name="profile_url"
        placeholder="https://picsum.photos/id/1/50/50 - 필수 X"
        value={formData.profile_url}
        onChange={(e) => onChangeHandler(e)}
      />
      <br />
      <input
        type="text"
        name="author"
        placeholder="작성자"
        value={formData.author}
        onChange={(e) => onChangeHandler(e)}
        required
      />
      <br />
      <textarea
        name="content"
        placeholder="내용"
        value={formData.content}
        onChange={(e) => onChangeHandler(e)}
        required
      ></textarea>
      <br />
      <input
        type="text"
        name="createdAt"
        placeholder={`${todayDate()}`}
        disabled
        required
      />
      <br />
      <button type="submit">{isEdit ? "수정하기" : "등록"}</button>
    </Container>
    
 // useForm.tsx
const [formData, setFormData] = useState<FormData>({
   profile_url: "",
   author: "",
   content: "",
   createdAt: todayDate(),
 });

const onChangeHandler = (e: InputEvent) => {
    let type = e.target.name;
    let value = e.target.value;
    if (type === "profile_url")
      setFormData((prev) => ({ ...prev, profile_url: value }));
    if (type === "author") setFormData((prev) => ({ ...prev, author: value }));
    if (type === "content")
      setFormData((prev) => ({ ...prev, content: value }));
    setFormData((prev) => ({ ...prev, [type]: value }));
};

 

하지만 if문을 많이 사용하지 않고도 동일한 함수를 만들 수 있다.

// useForm.tsx

const [formData, setFormData] = useState<FormData>({
   profile_url: "",
   author: "",
   content: "",
   createdAt: todayDate(),
 });

const onChangeHandler = (e: InputEvent) => {
    const { name, value } = e.target.name;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

 

input의 name을 이용해 setState 코드를 간소화시킬 수 있다.