React 여러개의 Input을 사용할때 팁

이전부터 리액트를 사용했지만, 오늘 깨달은 것

import React, { useState } from 'react';

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

  const { name, nickname } = inputs;

  const onChangeText = (e) => {
    const {name, value} = e.target;

    setInputs({
      ...inputs,
      [name]: value,
    })

  }

  const onReset = () => {
    setInputs({
      "name": "",
      "nickname": "",
    })
  }

  return (
    <div>
      <input name="name" onChange={onChangeText} value={name}/>
      <input name="nickname" onChange={onChangeText} value = {nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <br />값:
        {name}: {nickname}
      </div>
    </div>
  )
}

export default InputSample;

처음 state를 선언할때부터 객체로 선언 한 후 input엘리먼트 속성으로 name으로 분리 한 다음(name, nickname) onChangeText 함수에서 해당 name의 값을가지고 부여함.좀 더 간편한듯