React :: props & state

• jsx 를 적어줄 때:

1. import 해줄 것들 적어주고
2. class 적어주고
   2-1. constructor 필요하면 적어주고 (state 적어줄 때)
   2-2. render return 해주고
3. export default 클래스명

• onClick 으로 this.함수명 이렇게 적어줄 때는 this.함수명() 이렇게 적어주면 그냥 함수가 실행된다. 함수로 전달되는 인자가 없을 경우 this.함수명 이렇게 적어주고, 함수로 전달되는 인자가 있을 경우 () => this. 함수명(인자) 이렇게 arrow func 으로 적어줘야 한다.

• 부모 컴포넌트의 state 를 자식 컴포넌트로 상속할 수 있다. 이 때는 props 를 쓰면 된다. props 를 구멍이라고 생각하고 state 를 그 구멍으로 전달한다고 생각하면 된다.

// 부모 컴포넌트 = StateProps
// 자식 컴포넌트 = StatePropsChild

// 부모 컴포넌트의 state 중 일부
this.state = {
  teamA: 0,
}

// 부모 컴포넌트의 render 함수 중 일부
<StatePropsChild 
  score={this.state.teamA} 
  // score 이라는 구멍으로 this.state.teamA 라는 state 를 내려주는 것
  countHandler={this.countA} // 이런 식으로 함수도 내려줄 수 있다
/>

// 자식 컴포넌트의 return 일부
<div>{this.props.score}</div>
<button onClick={() => this.props.countHandler(1)}>child+</button>