[React]이벤트 처리(Event Handling)

• React의 이벤트 처리는 기본적인 Javascript와 비슷하다.
• 단, React의 이벤트 처리는 카멜케이스를 이용한다. 
• JSX문법을 이용하여 함수를 호출한다.

class EventHandling extends React.Component { //클래스형 컴포넌트
  constructor(props){
    super(props);
    this.state = {
      isToggleOn : true
    }
    //Javascipt는 특정한 값을 바꾸고자할때 바인딩처리를 해줘야한다.
    //this.handleClick = this.handleClick.bind(this); //1.이렇게 해도되고
  }
  handleClick = () =>{ //2.이렇게 해도된다.
    console.log("이벤트 처리");
    this.setState(state =>({
      //현재 가지고있는 isToggleOn의 값을 스위치 할수 있도록 만들기
      //true값이었다면 false로 바꿔주기
      isToggleOn : !this.state.isToggleOn
    }))
  }
  render(){
    return (
      <button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON': 'OFF'}</button>
    );
  }
}

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

바인딩이란? 

bind :  결속시키다 ,묶다

특정 객체에서 실행되게끔 고정시키는 역할

즉, 바인딩이란

a라는 객체가 있고, 전역함수 혹은 b객체에 test()라는 메서드가 있다고 치면 

b.test()라고 실행되는게 보통이지만 이것을 마치 a객체에서 실행되게 (a.test()와 같은 효과)하는 경우라 할 수 있다.

즉, 메서드와 객체를 묶어놓는 것을 바인딩이라 한다.