useState 사용해서 여러 개의 input 관리하기

import { useState } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });

  const { name, nickname } = inputs;
  const onChange = (e) => {
    const { name, value } = e.target;

    // 새로운 객체 설정
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const onReset = () => {
    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>
  );
}
export default InputSample;

• 객체를 업데이트 할 때에는 스프레드 문법을 사용해 객체를 복사한 뒤 그 위에 덮어씌우는 방식으로 업데이트 해야한다.