인프런 커뮤니티 질문&답변

안녕하세요 강사님

수업 도중에 input 태그에 name을 넣지 않을 경우 아무런 입력이 되지 않는걸 확인했습니다.

그래서 onChange 함수에서 에러가 발생해서 이벤트가 도중에 끊겼을 것이라고 예상하고 try catch로 감았는데도 exception이 발생하지 않더라구요.

혹시 왜 입력이 되지 않는 것인지 알 수 있을까요?

감사합니다~~!

import { useState } from "react";

const Register = () => {
  const [input, setInput] = useState({
    name: "",
    birth: "",
    country: "",
    bio: ""
  })

  const onChange = (e) => {
    try {
      setInput({
        ...input,
        [e.target.name]: e.target.value
      })
    } catch (err) {
      console.log(err);
    }
    // setInput({
    //   ...input,
    //   [e.target.name]: e.target.value
    // })
  }

  //const onChangeName = (e) => {
  //  setInput({
  //    ...input,
  //    name: e.target.value
  //  })
  //};

  //const onChangeBirth = (e) => {
  //  setInput({
  //    ...input,
  //    birth: e.target.value
  //  })
  //};

  //const onChangeCountry = (e) => {
  //  setInput({
  //    ...input,
  //    country: e.target.value
  //  })
  //};

  //const onChangeBio = (e) => {
  //  setInput({
  //    ...input,
  //    bio: e.target.value
  //  })
  //};

  return (
    <div>
      <div>
        <input
          // name="name"
          value={input.name}
          //onChange={onChangeName}
          onChange={onChange}
          placeholder={"이름"}
        />
        {input.name}
      </div>

      <div>
        <input
          name="birth"
          value={input.birth}
          //onChange={onChangeBirth}
          onChange={onChange}
          type="date"
        />
        {input.birth}
      </div>

      <div>
        {/* <select value={input.country} onChange={onChangeCountry}> */}
        <select value={input.country} name="country" onChange={onChange}>
          <option value=""></option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="uk">영국</option>
        </select>
        {input.country}
      </div>

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

export default Register;