여러개의 input 상태관리!

input 의 개수가 여러개가 됐을때는, 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현 할 수 있다. 하지만 그 방법은 가장 좋은 방법은 아니다. 더 좋은 방법은, input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이다. 그리고, useState 에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 한다!

 // 정보2, 정보4 input state
  const [inputs, setInputs] = useState({
    info2: "",
    info4: "",
  });
  const { info2, info4 } = inputs; // 비구조화 할당을 통해 값 추출

  // 정보2, 정보4 input onchange 이벤트
  const onChangeInput = (e) => {
    const { value, id } = e.target; // e.target에서 name과 value를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사
      [id]: value, // id 키를 가진 값을 value로 설정
    });
  };

참고: https://react.vlpt.us/basic/09-multiple-inputs.html