1. input 여러개 생성

InputSample.jsx

import { useState } from 'react'

export const InputSample = () => {
  const [text, setText] = useState('')

  const onChange = (e) => {}

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

• 안 좋은 방법 ) input의 개수 여러개
  • useState 여러번 사용
  • onChange 여러 개 사용
• 좋은 방법 ) input에 name을 설정, 이벤트 발생할 때 이 값을 참조
  • useState에서는 문자열이 아니라 객체 형태의 상태를 관리

2. 여러개 input 설정

InputSample.jsx

import { useState } from 'react'

export const InputSample = () => {
  const [inputs, setInputs] = useState({
    name: '',
    nickName: '',
  })

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

  const onChange = (e) => {
    const { value, name } = e.target // 우선 e.target에서 name과 value 추출
    setInputs({
      ...inputs, // 기본의 input 객체를 복사한 뒤
      [name]: value, // 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>
  )
}

리액트 상태에서 객체 수정

• 새로운 객체를 만들어서 새로운 객체에 변화

setInputs({
      ...inputs, // 기본의 input 객체를 복사한 뒤
      [name]: value, // name 키를 가진 값을 value로 설정
    })

• ... 문법 : spread 문법
  • 객체의 내용을 모두 "펼쳐서" 기존 객체 복사
• 이러한 작업을 '불변성을 지킨다'라는 의미
  • 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 -> 필요한 리렌더링이 진행
• 리액트에서 객체를 업데이트하게 될 때, 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야 함

해당 내용은 다음 자료를 참고했습니다.
https://react.vlpt.us/basic/09-multiple-inputs.html