또한, 클래스의 constructor에서 이벤트 핸들러를 클래스에 바인딩할 수도 있다. 기능적으로는 차이가 없지만, render()에서 같은 메서드를 한 번 이상 사용한다면 생성자에서 바인딩하여 중복을 줄일 수 있다. SaveButton 컴포넌트의 생성자에서 이벤트 핸들러를 바인딩하면 다음과 같다.

class SaveButton extends React.Component {
  constructor(props) {
      super(props)
      this.handleSave = this.handleSave.bind(this) ---- 클래스에 대한 ‘this’ 문맥을 바인딩하고, 이 ‘this’를 사용하여 이벤트 핸들러에서 클래스를 참조한다.
  }
  handleSave(event) {
      console.log(this, event)
  }
  render() {
      return <button onClick={this.handleSave}> ---- onClick 함수 정의를 전달한다.
          Save
      </button>
  }
}

 

이벤트 핸들러를 생성자에서 바인딩하면 중복을 제거할 수 있고, 모든 바인딩을 한 곳에서 작성할 수 있으므로 이 방법을 추천한다.