[리액트(React) Study Log] [Person App-010] Manipulating the State
1. state 조작
- extending Component 는 setState method 를 제공함.
(setState 는 기존 state 를 새 상태 값과 merge 함. state 교체가 아니기 때문에 setState 에서 지정한 key 에 해당하는 상태값만 변경되고 지정하지 않은 otherState(아래 코드에서) 의 값은 기존 값으로 유지됨.)
- react 에서 state 가 변경되었을 때 react 가 state 변경을 자동으로 인식해서 re-rendering 을 발생시키는데, this.setState 구문을 사용(immutable 한 방법 : 이전 상태 값을 유지하면서 새로운 상태 값으로 변경)해야 react가 state 의 변경을 인식할 수 있음.
- react 에서 state 변경시는 immutable 하게 조작해야함. this.setState 는 immutability 를 유지하지만 아래 형태 처럼 변수 값을 직접 지정하는 방식으로 state 값을 지정하면 immutability 가 깨지기 때문에 절대 안 됨. (이렇게 하면 상태가 변경되어도 변경된 상태 값이 브라우져에 반영되지 않음.) setState 를 사용하지 않는 immutable 한 state 조작법에 대해서는 뒤에 다시 설명.
this.state.persons[0].name = 'David';
2. setState 를 이용하여 switchNameHandler 함수 정의
switchNameHandler = () => {
// console.log('Was clicked!');
// Do Not Use : this.state.persons[0].name = 'David';
this.setState({
persons: [
{ name: 'David', age: 25 },
{ name: 'Lina', age: 25 },
{ name: 'Nick', age: 25 }
]
})
}
3. 브라우져에서 버튼을 클릭해서 state 변경 확인.
- 최초 화면
- 버튼 클릭 후 화면
