State

▶ 현재 상태의 값. 즉 현재 데이터라는 State의, 값(데이터 값)을 저장시키는 객체( Object )이다.

▶ 컴포넌트의 UI를 위한 데이터를 보관하는 객체 ( Object ) 인 State 가 업데이트(변경) 가 되면 자동적으로, render 함수가 호출되어,
개발자들이 구현해낸 render 함수 내부의 코드들이 동작한다.

• State 안에, 현재 데이터들의 값들이 저장되있다.
  State 값을 업데이트 (혹은 변경) 시키려면, 멤버 함수를 정의하고, 그 함수 내부에서 업데이트 시키는 동작을 하게끔 구현해야 한다.
  이때 사용하는 것이, setState( ) 메서드이다.

▶ React 에서는, Class 컴포넌트 안에 있는 State 를 직접 수정하는 것은 좋지 않다.
그렇기 때문에, State 를 얕은 복사한 복사물을 가지고 수정해야 한다.

setState( )

▶ 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;

• setState( ) 메서드의 인수로, 이미 정의한 State 객체와 같은 형태로 되있는 새로운 객체를 전달해야 한다.
  이렇게 setState( ) 메서드 사용과 인수로 새로운 객체를 전달하지 않으면, React 는 State 가 업데이트 되었는지 모르기 때문에
  꼭, setState( ) 메서드 와, setState( ) 메서드의 인수에, 이미 정의해놓은 State 와 같은 형태의 새로운 전체적인 객체를 전달해야,
  React 가 State 가 업데이트 되었는지 알게 되어, rener 함수를 호출하게 된다.