이번에는 React를 이용하여 아래 그림과 같은 카운트 업 기능을 구현합니다.
React 초학자는 이러한 간단한 구현으로 요령을 잡아 가면 좋다고 생각합니다.

완성도

0. 히나타

완성 코드입니다.
요소에서 상세하게 설명하겠습니다.

App.js

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0};
  }

  hendleClick() {
    setState({count: this.state.count + 1});
  }

  render() {
    return(
      <div>
        <p>{this.state.count}</p>
        <button onClick={()=>{this.handleClick()}}>+</button>
      </div>
    );
  }
}

1.state 정의

state를 사용하여 초기값을 설정합니다.

App.js

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props)
    // this.stateでcountプロパティの初期値を0に設定します
    this.state = {count: 0};
  }
}

2. 메소드 정의

setState를 사용하여 count의 값을 변경하는 handleClick 메서드를 만듭니다.

App.js

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0};
  }

  hendleClick() {
    // 「this.state.count + 1」 とすることでstateのcountの値に1を足すメソッドを定義する
    setState({count: this.state.count + 1});
  }
}

3. 이벤트 호출

클릭 이벤트에서 handleClick 메서드를 호출하고 버튼을 클릭할 때마다 계산 표시를 변경해 봅시다.

App.js

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0};
  }

  hendleClick() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return(
      <div>
        // stateを表示
        <p>{this.state.count}</p>
        // クリックイベントでhandleClickメソッドを呼び出す
        <button onClick={()=>{this.handleClick()}}>+</button>
      </div>
    );
  }
}

보충 (setState 정보)

setState가 실행되는 타이밍은 React가 마음대로 결정하므로,
아래 그림과 같이 써 버리면, count 의 값이 다른 처리로 바뀌어 버려, 잘 카운트 업 할 수 없는 경우도 있습니다.

App.js

  hendleClick() {
    this.setState({count: this.state.count + 1});
  }

그래서 setState 에서는 state 의 변경전의 값을 취득할 수 있게 되어 있어,
그 경우는 prevState 로…, 애로우 함수식으로 아래와 같이 써 주면 prevState 에 직전의 값이 들어오므로, 그 값을 사용해 재기록해 주면 OK 입니다.

App.js

  hendleClick() {
    this.setState(prevState => {
      return(
        //  count というキーの値を prevState.count + 1 としてあげればカウントされます
        count: prevState + 1
      );
    });
  }

이상