props 는 값을 변경할 수 없으나 state 는 값을 바꾸는 작업에 사용된다.
state 는 하나의 객체로서 값을 저장하고 변경한다.
- 반드시 생성자에서 state 를 초기화 해야함
- state 를 변경시킬 때에는 setState 함수를 사용해야함.(리엑트 엔진 구동이 됨)
- setState 는 비동기식으로 호출됨
import React, { Component } from 'react';
class StateExample extends Component {
constructor(props) {
super(props);
this.state = {
loading: true,
formData: 'no data',
};
this.handleData = this.handleData.bind(this);
setTimeout(this.handleData, 4000);
}
handleData() {
const data = 'new data';
const { formData } = this.state;
this.setState({
// 스테이트 변경
loading: false,
formData: data + formData,
});
console.log('loading 값' + this.state.loading);
}
render() {
return (
<div>
<span>로딩중 {String(this.state.loading)}</span>
<span>결과: {this.state.formData}</span>
</div>
);
}
}
export default StateExample;
setState 의 인자로 함수를 주면 이전 state 값을 쉽게 읽어 들일 수 있다.
// handleData(data) {
// this.setState(function(prevState) {
// const newState = {
// loading: false,
// formData: data + prevState.formData,
// };
// return newState;
// });
// }
handleData(data) {
this.setState(prevState => ({ loading: false, formData: prevState.formData }));
}
'기반을 다지자 ES6 > React.js' 카테고리의 다른 글
Props (0) | 2020.10.03 |
---|---|
ES6:라이브러리 의존 관리 (0) | 2020.09.30 |
ES6 : 클래스, 객체 확장 표현식과 구조분해 할당 (0) | 2020.09.30 |
ES6 : 템플릿 문자열, 전개연산자, 가변과 불변 변수 (0) | 2020.09.30 |
1. 리엑트 앱 수정해보기 (0) | 2020.09.30 |