[React] useState를 사용하여 인풋 만들기

useState 안에는 초기값을 적어준다. (객체, 원시타입 등이 올 수 있다.)
setter함수를 사용하여 객체를 변경할때는 임시의 복사본을 만들어 새로운 객체를 넣어준다.

Hook

const [form, setForm] = useState({
    nickname: "",
    description: "",
});

const onChangeInputForm = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name } = e.target;
    const formTemp = { ...form, [name]: e.target.value };
    setForm(formTemp);
};

두개의 인풋을 하나의 함수로 변경하기위해 각각의 input에 name attribute를 지정해준 뒤,
e.target에서 name을 꺼내고, 일치하는 key값에 e.target.value를 넣어준다.

Markup

<div className="compo font16">
  {`이름 : ${form.nickname}`}
  <br />
  {`소개 : ${form.description}`}
  <br />
  <div className="base-input-wrap">
    <input className="base-input" name="nickname" value={form.nickname} placeholder="닉네임" onChange={onChangeInputForm} />
  </div>
  <div className="base-input-wrap">
    <input className="base-input" name="description" value={form.description} placeholder="소개" onChange={onChangeInputForm} />
  </div>
</div>