React 이벤트 핸들링

• 함수가 호출될 때 this는 호출부에 따라 결정됨
• 클래스의 임의 메소드가 특정 HTML 요소의 이벤트로 등록되는 과정에서
  메소드와 this의 관계가 끊김
• 이 때문에 임의 메소드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 제대로 가리키기 위해 메소드를 this와 바인딩하는 작업이 필요
• 바인딩하지 않은 경우라면 this가 undefined를 가리키게 됨
  자바스크립트는 호출하는 함수에 객체를 바인딩 해주지 않으면 전역 객체로부터 값을 받아옴
• 아래 코드는 constructor에서 함수를 바인딩하는 작업이 이루어지고 있음

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
}

handleClick(e) {
    alert(this.state.message);
    this.setState({
      message: '',
    });
  }

render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
}

새 메서드를 만들 때마다 constructor도 수정해야 하므로 귀찮음
그래서 화살표 함수로 메서드를 만들면 귀찮음 해결
화살표 함수의 this는 인스턴스를 가리키기 때문

handleClick=(e)=> {
  alert(this.state.message);
  this.setState({
    message: '',
  });
}