▶ 현재 상태의 값. 즉 현재 데이터라는 State의, 값(데이터 값)을 저장시키는 객체( Object )이다.
▶ 컴포넌트의 UI를 위한 데이터를 보관하는 객체 ( Object ) 인 State 가 업데이트(변경) 가 되면 자동적으로, render 함수가 호출되어,
개발자들이 구현해낸 render 함수 내부의 코드들이 동작한다.
▶ React 에서는, Class 컴포넌트 안에 있는 State 를 직접 수정하는 것은 좋지 않다.
그렇기 때문에, State 를 얕은 복사한 복사물을 가지고 수정해야 한다.
▶ State 값을 업데이트 (혹은 변경) 시키려면, 멤버 함수를 정의하고, 그 함수 내부에서 업데이트 시키기 위해 setState( ) 메서드를 사용한다.
그리고 인수에는, 새로운 객체를 전달해야 한다.
class Habit extends Component {
// state : 멤버변수
state = {
count : 0,
};
// handleIncrement : 멤버함수
handleIncrement = () =>{
this.setState({count : this.state.count + 1}) // : setState 메서드의 인수에 새로운 객체를 전달해줬다.
};
render() {
return (
<span className="habit-count">{this.state.count}</span>
<button className="habit-button habit-increase"
onClick={this.handleIncrement}>
<i className="fas fa-plus-square"></i>
</button>
)
}
}
export default Habit;