[REACT]회원가입 폼

//회원가입 폼
//1. 이름 2. 국적 3. 생년월일 4. 자기소개
import { useState } from "react";

const Register = () => {
  const [name, setName] = useState("이름");
  const [birth, setBirth] = useState("");
  const [country, setCountry] = useState("");
  const [bio, setBio] = useState("");
  const onChangeName = (e) => {
    setName(e.target.value);
  };
  const onChangeBirth = (e) => {
    setBirth(e.target.value);
  };
  const onChangeCountry = (e) => {
    setCountry(e.target.value);
  };
  const onChangeBio = (e) => {
    setBio(e.target.value);
  };
  return (
    <>
      <div>
        <input value={name} onChange={onChangeName} placeholder={"이름"} />
        {name}
      </div>
      <div>
        <input value={birth} onChange={onChangeBirth} type="date" />
      </div>
      <div>
        <select value={country} onChange={onChangeCountry}>
          <option>국적선택</option>
          <option value="ko">한국</option>
          <option value="uk">영국</option>
          <option value="us">미국</option>
        </select>
        {country}

        <div>
          <div>
            <textarea value={bio} onChange={onChangeBio} />
            {bio}
          </div>
        </div>
      </div>
    </>
  );
};

export default Register;

---

//회원가입 폼
//1. 이름 2. 국적 3. 생년월일 4. 자기소개
import { useState } from "react";

const Register = () => {
  const [input, setInput] = useState({
    name: "",
    birth: "",
    country: "",
    bio: "",
  });
  const onChange = (e) => {
    console.log(e.target.name, e.target.value);
    setInput({
      ...input,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <>
      <div>
        <input
          name="name"
          value={input.name}
          onChange={onChange}
          placeholder={"이름"}
        />
        {input.name}
      </div>
      <div>
        <input
          name="birth"
          value={input.birth}
          onChange={onChange}
          type="date"
        />
      </div>
      <div>
        <select name="country" value={input.country} onChange={onChange}>
          <option>국적선택</option>
          <option value="ko">한국</option>
          <option value="uk">영국</option>
          <option value="us">미국</option>
        </select>
        {input.country}

        <div>
          <div>
            <textarea name="boi" value={input.bio} onChange={onChange} />
            {input.bio}
          </div>
        </div>
      </div>
    </>
  );
};

export default Register;