예약페이지를 구현 중 이름, 휴대폰번호, 쿠폰, 포인트를 input으로 관리해야 했다. 처음엔 각각의 state로 관리했는데 그렇게 하니 input의 값이 변경되는 함수도 각각 작성해야하는 불편함이 있었다.
관리해야 하는 inpute의 값을 각각의 state로 만들지 않고, input들의 값을 객체에 넣어서 하나의 state로 관리.
//연관된 input을 하나의 state로 관리
const [inputs, setInputs] = useState({
userName: '',
phone: '',
coupon: 0,
pointInput: '',
});
//비구조화 할당으로 값 추출
const { userName, phone, coupon, pointInput } = inputs;
//하나의 함수에서 input 전체의 값 관리
const changeInput = (e) => {
const { id, value } = e.target; //비구조화 할당으로 e.target에서 값 추출
setInputs({
...inputs, //기존의 input객체 복사
[id]: value, //변경되는 부분 반영
});
};
return(
//input 간략한 예시. 이때 inputs state 객체의 키와 input의 id가 같아야 한다.
//id 대신 name으로 설정해도 됨. 그러면 changeInput함수도 [name]:value가 되어야 함
<input id="userName" placeholder="이름" value={userName} onChange={changeInput} />
<input id="phone" placeholder="휴대폰번호" value={phone} onChange={changeInput}/>
<input id="coupon" value={coupon} onChange={changeInput}/>
<input id="pointInput" value={pointInput} onChange={changeInput}/>
)