state

컴포넌트에서 유동적인 데이터를 처리할 때 사용
초기값 설정이 필수 -> constructor(생성자) 내부에서 this.state = {state이름: 값} 으로 설정
JSX 내부에서 {this.state.state이름}
값을 수정할 때는 setState({state이름: 값})으로 변경, 렌더링 후에는 this.state 사용하지 않는다
-> setState는 안전하게 변경된 값에 대한 부분만 리렌더링 되지만 this.state는
명시적으로 페이지 전체를 렌더링해줘야함(비효율적)

• constructor에서는 setState={} 사용 불가, constructor 외에는 this.state={} 사용 불가
  

** bit.ly/ReactCodePen 리액트 기본 설정이 된 codepen 페이지로 접속

constructor

constructor(생성자) 메소드의 파라미터는 props이다.
super()를 통해 상속받은 React.Component의 생성자 메소드를 먼저 실행해야
props나 this.state에 접근 가능

class counter extends React.Component{
  constructor(props){
    super(props);
    this.state={
      value: 0
    }
  }
  render(){
    return(
      <div>
        <h2>{this.state.value}</h2>
      </div>
    )
  }
}

this.binding

자바스크립트 함수가 실행될 때는 this가 뭔지 알 수 없기 때문에
직접 바인딩 해줘야한다.

// this가 뭔지 알 수 없음
handleClick (){
    this.setState({
      value: this.state.value + 1
    })
}
  
onClick = {this.handleClick}


onClick = {this.handleClick.bind(this)} 
// render()의 this와 현재 함수의 this가 같다고 bind()해준 것
// 사용 가능하지만 권장하지 않음

constructor(props){
    super(props);
    this.state={
      value: 0
    }
    this.handleClick = this.handleClick.bind(this);
 }
// 생성자에서 this를 바인딩 해주는 것이 권장됨