[리액트] input Handler 함수 합치기

import React, { useState } from "react";

function Test() {
  const [inputV, setInputV] = useState({ id: "", pw: "" }); //1

  const handle = (event) => { //2
    const { value, name } = event.target; //3
    setInputV({ ...inputV, [name]: value });//4
  };

  return (
    <form>
      <input name="id" type="text" onChange={handle} />
      <input name="pw" type="password" onChange={handle} />
      <button>버튼</button>
    </form>
  );
}
export default Test;

아무 거나 합치는 것이 아니라 연관성(응집도)에 따라 합친다.

1. {id:"",pw:""}를 state의 초기값으로 설정한다.

2. input의 정보가 담긴 event를 가져온다.

3. 객체를 구조 분해 할당 한다.

   • 결과: value = event.target.value, name = event.target.name )
   • name 속성은 <input>에서만 가능하다.

4. 스프레드 연산자로 inputV객체에 [name]:value 프로퍼티를 추가한다.
   변수를 key로 설정하려면 대괄호를 이용해야 한다.
   set함수로 변수를 업데이트 한다.

5. 객체에선 key가 중복된 프로퍼티가 들어오면 value가 덮어씌워 진다.

   따라서 input창이 바뀌면 key는 그대로 있고 value는 계속해서 바뀐다.