[리액트(React) Study Log] [Person App-013] Adding Two Way Binding
1. Person component 에서 사용자로부터 입력받은 값을 사용하여 name 변경하기.
- nameChangedHandler 정의 : input element 를 통해 사용자 입력을 받을 것이고, input element 의 chage event 발생시 그 변경사항을 부모 component 의 state 에 반영할 예정이므로 setState를 사용하며, name 값은 event.target.value 로 받아서 사용한다.
- nameChangedHandler 함수를 'changed' 라는 props name 으로 Person component 에 전달.
// src-App.js
...
nameChangedHandler = (event) => {
this.setState({
persons: [
{ name: 'David', age: 25 },
{ name: event.target.value, age: 25 },
{ name: 'Nick', age: 25 }
]
})
}
...
changed={this.nameChangedHandler}>Nice to meet you.</Person>
...
export default App;
- changed prop 을 input element - onChanged 이벤트의 callback 함수로 지정.
//src-Person-Person.js
...
<p>{props.children}</p>
<input type="text" onChange={props.changed} value={props.name} />
...
export default person;
2. 브라우져 확인
(두번째 input box 에 내용을 넣으면 화면에 출력되는 name 이 실시간으로 변경됨.)