9. 여러개의 input 상태 관리하기

/* InputSample.js */

function InputSample() {
  // inputs의 초기값: {name: '', nickname: ''}
  // inputs.name과 inputs.nickname 모두 공백
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  // 비구조화 할당을 통해 값 추출
  const { name, nickname } = inputs; 

  const onChange = (e) => {
    // 우선 e.target 에서 name 과 value 를 추출
    // 이 때 name은 위에서 추출한 name이 아니라 input의 name property의 값이다.
    // 아래의 name과 헷갈리는 것을 막기 위해 input_name으로 수정.
    const { value, input_name } = e.target;
    setInputs({
      // 기존의 input 객체를 복사한 뒤
      ...inputs, 
      // inputs 객체에서 input_name 키를 가진 값을 value 로 설정
      // e.g., 이벤트가 첫 번째 input에서 발생했으면 input_name이 name이기 때문에
      // inputs중 name의 값을 value로 변경. 
        // name이 이미 inputs 안에 존재하는 값이라 새로운 key: value 값이 추가되는 것이 아니라 기존의 값을 변경
      // 변경된 값은 rendering 되면서 바로 반영된다.
      [input_name]: value 
    });
  };

  const onReset = () => {
    // inputs를 초기화: name과 nickname 값을 다시 초기값 (blank)로 설정
    setInputs({
      name: '',
      nickname: '',
    })
  };

  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}