컴포넌트 내에서
State는 자신이 가지고있고
변경할때는 setState()를 호출한다.
import React, { Component } from 'react';
class Counter extends Component {
state = {
number: 0
};
handelIncrease = () => {
this.setState({
number: this.state.number + 1
});
};
handelDecrease = () => {
this.setState({
number: this.state.number + -1
});
};
render() {
return (
<div>
<h1>카운터</h1>
<div> 값 : {this.state.number} </div>
<button onClick={this.handelIncrease}>+</button>
<button onClick={this.handelDecrease}>-</button>
</div>
);
}
}
export default Counter;
근데 왜 이것만 =>를 썻는가?
annot read property 'setState' of undefined
handelIncrease
/src/Counter.js:8:9
5 | number: 0
6 | };
7 | handelIncrease() {
> 8 | this.setState({
| ^
9 | number: this.state.number + 1
10 | });
11 | };
이런식으로 this를 모른다.
import React, { Component } from 'react';
class Counter extends Component {
state = {
number: 0
};
constructor(props) {
super(props);
this.handelIncrease = this.handelIncrease.bind(this);
this.handelDecrease = this.handelDecrease.bind(this);
}
handelIncrease() {
this.setState({
number: this.state.number + 1
});
};
handelDecrease() {
this.setState({
number: this.state.number + -1
});
};
render() {
return (
<div>
<h1>카운터</h1>
<div> 값 : {this.state.number} </div>
<button onClick={this.handelIncrease}>+</button>
<button onClick={this.handelDecrease}>-</button>
</div>
);
}
}
export default Counter;
이렇게 바꿔줄수있따
Constructor은 컴포넌트가 처음 실행될때 실행되는것이고
이것으로 this를 명시해주는 작업이 필요하다.