state
state
유동적인 데이터
JSX 내부에 {this.state.stateName}
초기값 설정이 필수, 생성자(constructor)에서 this.state = {}로 설정(설정을 안했는데 쓰면 에러)
값을 수정할 때에는 this.setState({...})
렌더링 된 다음엔 this.state = 절대 사용하면 안됨 값이 변경된 후에는 자동으로 리렌더링함.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
value : 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
value:this.state.value + 1
});
}
render() {
return (
<div>
<h2>{this.state.value}</h2>
<button onClick={this.handleClick>Press Me</button>
</div>
)
}
}
class App extends React.Component {
render() {
return (
<Counter/>
);
}
};
ReactDOM.render(
<App></App>,
document.getElementById("root")
);
바인딩을 해주지 않으면 this를 사용할당시 무엇이 this인지 모르기때문에 bind해주어야한다.