[React] 버튼 클릭이벤트 만들기

HTML

 

 

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

 

 

 

JS(Babel)

 

 

class App extends React.Component{

  constructor(props){

    super(props);

  }

  render(){

    return <MyButton buttonName="안녕!"/>

  }

}

 

class MyButton extends React.Component{

   constructor(props){

    super(props);

     

     this.state = {};

     this.state.count = 0;

     

     

   }

 

 

 

  render(){

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

//  함수()는 MyButton에 소속되어 있는 함수, 이 함수를 <button/> 에 빌려주었음.

//     bind를 쓰지 않으면 this의 주어가 바뀜.(button으로)

//    bind(this)를 사용하면 주어가 MyButton 으로 고정됨.

  }

  

   함수(){

    const newCount = this.state.count + 1;

//     한번 정하면 값이 변하지 않으므로 const 사용.

     

     this.setState({

       count: newCount

     });

   }

//   this.state.count를 직접 수정하지 말 것

//   변수와 setState 함수를 이용해 바꿀 것

  

}

 

  function 안녕(){

    alert('안녕!');

    return this;

  }

 

 

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

 

 

// 버튼 이름 등 한번 고정되면 바뀌지 않는 정보 -> props 로 전달

// 변하는 속성 -> state(상태)