여러개의 input 상태 관리하기

 

여러 개의 input 상태 관리하기 

 

input이 여러 개일때는 어떻게 관리하는지 알아보자. 

 

 

InputSample.js

import React, {useState} from 'react';

function InputSample() {

  const onChange = (e) => {
    
  };

  const onReset = () => {
   
  };

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

export default InputSample;

 

이제 이름과 닉네임에 값을 넣어 출력해준다. 

 

(new!!) InputSample.js 

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; 
    setInputs ({
      ...inputs,
      [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;

 

 

 

리액트에서 객체를 수정할 때는 , 

 setInputs ({
      ...inputs,
      [name] : value
    });

 

기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서 새 객체에 변화를 줘야한다. 

 

 

 

 

실행 결과 

최종 코드를 실행하면 

화면과 같이 나타난다.