[짜잘한 react] input이 여러개일 때

input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것입니다.
그리고 useState 에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 합니다.

• inputs들에게 할당을 받아준다.
• input 내에서도 name을 넣어준다.
• e.target에서 value와 name을 추출해준다.
• useState에 [name 키값] : vlaue로 할당해준다.
  그 전에 ...inputs로 setInput안에 기존 내용을 가져와 준다.
• return 에서는 {name값}, {nickname}과 같이 받아 사용한다.

• 객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다

import React, { useState } from 'react';

function 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>
  );
}

export default InputSample;