[React] 버튼 클릭 이벤트 만들기:스텝 카운터

 

 

 

HTML

 

 

<div id="root"></div>

 

 

 

 

JS(Babel)

 

 

class App extends React.Component{

  constructor(props){

    super(props);

  }

  render(){

    return <MyButton buttonName="안녕!" step={1}/>

  }

}

 

class MyButton extends React.Component{

  constructor(props){

//     맨 처음 딱 한번만 실행되고 실행되지 않는 함수. 클래스가 가지고 있는 속성을 정리하는 역할로 사용.

    super(props);

    

    this.state = {};

    this.state.count = 0;

  }

  

  함수(){

    // this.setState({

    //   count: this.state.count + this.props.step

    // });

    

    this.setState((prevState, props) => {

      return{

        count: prevState.count + props.step

      }

//       콜백을 넘겨서 데이터를 받는 방법 ->  복잡한 동시 작업 중 데이터가 꼬일 일이 없다.

    });

    

    

//     내부 감시자

//     일정 시간 기다립니다.

//     => : 애로우, 함수의 단축 표현. 함수를 넘길 때 FUNCTION이 아니라 반드시 arrow 사용

  }

  

  render(){

    return <button onClick={this.함수.bind(this)}>클릭 카운터 [{this.state.count}]</button>  

  }

}

 

ReactDOM.render(<App/>, document.getElementById('root'));