[ 여러 개의 Input 상태 일 때 ]
•
Input의 갯수가 한개가 아닌 여러개일 때 어떻게해야하는지 한번 알아보자
Input의 개수가 여러개일 때는 input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는것이다. 그리고 useState에서는 문자열이 아니라 객체형태의 상태를 관리해줘야한다.
React에서 객체를 수정해야할 때는 직접수정을 하면안되고 새로운 객체를 만들어서 새로운 객체의 변화를 주고 이를 상태로 사용해줘야한다.
setInputs({
...inputs,
[name]: value
});
JavaScript
복사
•
...문법은 spread문법이다 → 객체의 내용을 모두 "펼쳐서" 기존 객체를 복사한다는 의미
•
이러한 작업은 '불변성을 지켜줌'
•
불변성을 지켜줘야 React 컴포넌트에서 상태가 업데이트를 감지, 이에 따라 필요한 리렌더링을 진행
import React,{useState, useRef} from 'react';
function InputSample2() {
//기존값, 변하는값 설정
const [Inputs, setInputs] = useState({
name : '',
nickname : ''
});
const {name, nickname} = Inputs; //비구조화 할당을 통해 값 추출
const onChange = (e) => {
const {name, value} = e.target; // 우선 e.target에서 name과 value 추출
setInputs({
//React에서는 반드시 원본을 업데이트쳐주는게아니라 기존정보를 복사해갖고 그거를 업데이트
//해줘야한다.
...Inputs, //1.복사해주기
[name] : value //2.name을 가지고있는 변수에 value를 저장한다.
});
};
const nameInput = useRef();
const onReset = () =>{
setInputs({
name : '',
nickname : '',
})
nameInput.current.focus()
};
return (
<div>
<input name="name" placeholder="이름을 입력해주세요" onChange={onChange} value={name} />
<input name="nickname" placeholder="닉네임을 입력해주세요" onChange={onChange} value={nickname} ref={nameInput} />
<button onClick={onReset}>초기화</button>
<div>
<b>값:{name}({nickname})</b>
</div>
</div>
)
}
export default InputSample2;
JavaScript
복사
