Form

AppForm.jsx

import React, { useState } from "react";

export default function AppForm() {
  const [form, setForm] = useState({ name: "", email: "" });
  const handleSubmit = (e) => {
    // submit의 기본동작은 페이지를 새로고침 하기 때문에 항상 form을 이용할 때는 preventDefault()를 해줘야 한단
    e.preventDefault();
  };
  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm({ ...form, [name]: value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">이름:</label>
      <input
        type="text"
        id="name"
        name="name"
        value={form.name}
        // form 요소는 사용자가 입력하면 ui가 바뀌는데 정작 컴포넌트의 상태는 바뀌지 않음
        // 또한 사용자가 입력한 데이터도 필요함
        // 따라서 사용자가 입력할 때마다 상태를 업데이트 해줘야 함
        onChange={handleChange}
      />
      <label htmlFor="email">이메일:</label>
      <input
        type="email"
        id="email"
        name="email"
        value={form.email}
        onChange={handleChange}
      />
      <button>Submit</button>
    </form>
  );
}