[리액트를 다루는 기술] input name을 이용하여 setState 조정

import React, {useState} from 'react'

export default function EventPractice() {
  const [state, setState] = useState({
    username: '',
    message: ''
  })

  function handleChange(e) {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    })
  }

  function handleClick(e) {
    alert(state.username + ': ' + state.message);
    setState({
      username: '',
      message: '',
    })
  }

  function handleKeyDown(e) {
    if(e.key === 'Enter') {
      handleClick();
    }
  }

  return (
    <>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name='username'
        placeholder='사용자명'
        value={state.username}
        onChange={handleChange}
      />
      <input
        type="text"
        name='message'
        placeholder='메시지를 입력하세요.'
        value={state.message}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
      />
      <button onClick={handleClick}>확인</button>
    </>
  )
}

• input이 늘어나면 state를 객체로 만들어 변수 생성
• input name에 맞춰 key값 e.target.name의 value를 e.target.value로 변경(key는 [ ]로 묶어주기)
• setState 시 ... 스프레드 연산자 사용
• handleChange 하나로 모든 input 컨트롤

객체의 키 값 설정

• 키를 설정할 때 [e.target.name]으로 원하는 키 값 선택 가능