리액트 useState 여러 요소 다루기

useState를 이용하여 여러 요소의 변경사항을 한번에 선언하고 관리할 수 있다.

 

state 내 여러 요소가 있다면 다음과 같이 관리할 수 있다.

 

1) 선언

const [inputs, setInputs]=useState({
    nickname : '',
    name : ''
});

여기서는 nickname과 name 2가지 요소를 관리한다.

 

2) 추출

const {name,nickname} = inputs;

inputs 내부의 name과 nickname을 추출하였다.

이제 함수 내부에서 {name}, {nickname}으로 해당 값을 가져올 수 있다.

 

3) 이벤트 변화

//입력값 출력
const onChange = (e)=>{
    const {value,name} = e.target; //타겟의 name과 value 가져오기
    console.log(value + " " +name);
    setInputs({
        ...inputs, //state의 inputs 객체 복사
        [name]:value //name => value로 변경
    });
}

이벤트 변화를 감지하여 value와 name값을 추출한다.

setter를 이용하여 state의 값을 변경한다.

이때 ...inputs를 이용하여 state 객체의 값을 복사하고 (spread 문법)

복사한 객체에서 name 부분만 value로 변경한다.

 

4) 리셋

//입력값 리셋
const onReset = ()=>{
    setInputs({
        name:'',
        nickname:''
    })
}

setter를 이용하여 name과 nickname을 한꺼번에 초기화 시킨다.

 

5) 리턴

return (
    <div className="func">
        <input name="name" placeholder="이름" onChange={onChange} value={name} />
        <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
        <div>
            <span>이름 : </span>
            <span>{name}</span>
            <span>닉네임 : </span>
            <span>{nickname}</span>
        </div>
        <button onClick={onReset}>초기화</button>
    </div>
);

 

6) 결과

이름과 닉네임을 한번에 onChange를 이용하여 state를 변경하였다.