개요

어셈블리는 상태 값을 사용하여 사용자 인터페이스를 나타냅니다.
객체 인스턴스를 사용하여 어셈블리 상태를 관리합니다.
구성 요소 간에 데이터를 단방향으로 송수신하는props
구성 요소 내부에서 사용하는state입니다.

props

구성 요소에 사용되는 데이터를 처리하는 데 사용되는 변경되지 않은 데이터입니다.
상위 어셈블리에 데이터를 전송하는 서브어셈블리입니다.
props는 변경할 수 없습니다.

class Main extends Component {
  render() {
    return (
      <div>
        hello! I'am <b>{this.props.name}</b> .
      </div>
    );
  }
}

export default Main;

import Main from './Main';

class Sub extends Component {
  render() {
    return (
      <Main name="Tanaka" />
    );
  }
}

export default Sub;

state

구성 요소가 관리하는 상태 값의 유동 데이터를 처리할 때state를 사용하십시오.
state는 변경할 수 있고, 때로는 변경할 수 있습니다setState 사용 방법으로 상태를 변경합니다.
setState는 작업이 완료된 Callback을 비동기적으로 실행하고 설정할 수 있습니다.

class Number extends Component {
  state = {
    number: 0
  }

  increase = () => {
    this.setState({
      number: this.state.number + 1
    });
  }

  decrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  }

  render() {
    return (
      <div>
        <div>number : {this.state.number}</div>
        <button onClick={this.increase}>+</button>
        <button onClick={this.decrease }>-</button>
      </div>
    );
  }
}

export default Number;