[React] 입력폼 (form)

리액트의 기본은 모든 UI의 업데이트는 상태변경이 되어야만 가능함.

Form의 input 태그 내에서는 상태 변경 없이도 값 입력시 바로 업데이트가 되는데

이를 uncontrolled component라고 한다.

 

따라서, 각 입력폼이 변경될 때마다 상태 값을 변경해주는 설정이 필요함

 

• 사용 예시:

export default function AppForm() {
  const [form, setForm] = useState({name:'', email:''});

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(form);
  };
  const handleChange = (e) => 
  {
    const {name, value} = e.target;
    setForm((prev) => ({
      ...prev, [name] : value
    }));
  };

  return (
      <form onSubmit={handleSubmit}>
        <label
        htmlFor='name'
        >이름</label>
        <input
          type='text'
          id='name'
          name='name'
          value={form.name}
          onChange={handleChange}
        ></input>

        <label
        htmlFor='email'
        >이메일</label>
        <input
          type='email'
          name='email'
          id='email'
          value={form.email}
          onChange={handleChange}
        ></input>

        <button>제출</button>
      </form>
  );
}