여러개의 input 상태 관리하기

import React, { useState } from 'react';

function InputSample(){ //여러개의 객체를 관리해줘야 한다.
    const [inputs, setInputs] = useState({
        name:'',
        nickname:'',
    });

    const { name, nickname } = inputs; //비구조화할당을 통해 추출
    const onChange = (e) => {
        const { name, value } = e.target;

    setInputs({ //객체를 업데이트할 때는 기존 객체를 복사해야한다.
        ...inputs, //spread 연산자
        [name]: value, // 실제 []안에 무엇을 가르키고있는지에 따라 다른 key값이 변경된다 
    });
    }
    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;

여러개의 input이 들어오면 여러개의 객체를 관리해줘야한다

 

1) 객체를 선언후에 비구조화 할당을 통해 input을 추출한다

2) 객체를 업데이트할 때는 기존 객체를 복사해야하는데 spread를 통해 기존 input을 복사한다

3) [ ] : value를 통해 실제 []안에 무엇을 가르키고 있는지에 따라 다른 key값이 변경된다

 

Spread

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

기존의 것을 건들이지 않고, 새로운 객체를 만든다는 것 인데요, 이러한 상황에 사용 할 수 있는 유용한 문법이 spread 이다