잘못 된 내용에 대한 지적은 언제든 환영입니다.
// input 값 변경 시, 변경 값을 콘솔에 출력하는 예제
const onChange = (e) => {
console.log("변경 된 입력값 = " + e.target.value);
}
return <input onChange={onChange} />;
e
를 파라미터로 넘겨받을 수 있다.e
일 필요는 없다.)e.target
: 이벤트가 발생 한 DOM을 가리킨다.import { useState } from "react";
function InputSample() {
const [text, setText] = useState("");
// e.target = 이벤트가 발생한 input 태그
const onChange = (e) => setText(e.target.value);
const reset = () => setText("");
return (
<div>
<input onChange={onChange} value={text} />
<button onClick={reset}>초기화</button>
<div>
<b>값 : {text}</b>
</div>
</div>
);
}
export default InputSample();
상태를 객체 리터럴로 지정하여 복수의 state값을 동적으로 관리할 수 있다.
const [state, setState] = useState({
name: "백괴",
address: "성남시 분당구 서현동"
});
이전 챕터에서도 알아보았듯이, state 값은 메모리 주소로 값 변경을 판단하기 때문에 불변성을 지켜주어야 한다.
여러 값이 들어있는 객체 리터럴이 state값일 경우, 각 값을 수정하기 위해서는 변경 사항과 나머지 값들이 포함 된 새로운 객체 리터럴로 업데이트 해주어야 한다.
spread 연산자 활용하기
Q. spread가 뭔가요?
A. 배열/객체 요소의 원시값들을 다른 배열/객체로 복붙해주는 연산자이다.
⚠ 주의 : 같은 3점 연산자인 rest와 햇갈릴 수 있으나, 역할은 전혀 다르다.const arr = [1, 2, 3, 4]; const arr_plus = [...arr, 5, 6]; console.log(arr_plus); // [1, 2, 3, 4, 5, 6]
spread를 통해 기존 객체의 값을 복붙하고 변경 사항을 추가함으로서 불변성을 지킨 상태 업데이트가 가능하다.
const [state, setState] = useState({
name: "백괴",
address: "성남시 분당구 서현동"
});
setState({
...state,
name: "흑괴",
});
// { name: "흑괴", address: "성남시 분당구 서현동" }
console.log(state)
References
"8. input 상태 관리하기" .velopert
"9. 여러개의 input 상태 관리하기" .velopert