React 여러 input값 한개의 useState로 관리 하기 (객체 형태)

https://crispypotato.tistory.com/149

지난번은 input이 하나였지만
input값이 여러개인 상황에서도 useState하나만 사용 할 수 있다.

 

useState

실제 코드

import React, { useState } from 'react';

function Input() {
  const [text, setText] = useState({
    name:'',
    age:''
  })

  const {name, age} = text

  const change = (e) => {
    const {value,name} = e.target
    setText({
      ...text,
      [name]: value
    })
  }
  const reset = () => {
    setText({
      name:'',
      age:''
    })
  }
  return (
    <div>
      <input name="name" onChange={change} value={name}></input>
      <input name="age" onChange={change} value={age}></input>
      <button onClick = {reset}>초기화</button>
      <div>
        <b>값:{name} 나이:{age}</b>
      </div>
    </div>
  );
}

export default Input;

*중요 리액트에서는 객체 값을 변경할때  직접적으로 text[name]: value 이렇게 변경 하면 안되고

useState의 setter를 이용하여 값을 변경해야 리액트가 값이 변경되는것을 인식 할 수 있으니 객체에 직접적인 값 변경은 지양해야 한다.

 

*input이 여러개 이니 어떤 값이 변경되었는지 name 속성이 없으면 확인하기 불가능하다.

 

1. useState에 사용하는 상태값을 넣어준다.

2. text에 객체로 상태값이 들어가 있으니 비구조화 할당으로 name, age로 나누어 준다.

3. 해당하는 상태값 이름을 넣어주고  change 함수에서 name과 value도 마찬가로 비구조 할당으로 name value로 나누어 준다.

4. setText()에 spread문법을 사용하여 ...text 현재 값을 넣어주고 [name] : value로 

키값이 name에 해당하는곳에 value를 넣어준다.

 

출처 : https://react.vlpt.us/basic/09-multiple-inputs.html