bind()를 이용하면 이벤트 핸들러 함수가 클래스의 인스턴스인 React 엘리먼트에 대한 참조를 유지할 수 있다. 만약 바인딩하지 않으면 use strict를 선언한 상태에서 this는 null이 된다. 다음 경우에는 bind(this)로 바인딩하지 않는다.

• this를 이용해서 해당 클래스를 참조할 필요가 없을 때

• ES6+ 클래스 대신 예전 방식인 React.createClass()를 사용할 때. 이때는 createClass()가 자동으로 바인딩한다.

• 화살표 함수(() => {})를 사용할 때

 

onClick 이벤트에 대한 이벤트 핸들러를 클래스 메서드로 선언하면 좀 더 깔끔하다(handleSave()라고 이름을 지어 보자). 그림 6-1과 다음 예제 코드(ch06/button/jsx/button.jsx)를 통해 클릭했을 때 this와 event의 값을 출력하는 SaveButton 컴포넌트를 살펴보자.

 

예제 코드 6.1 이벤트 핸들러를 클래스 메서드로 정의

class SaveButton extends React.Component {
    handleSave(event) {
        console.log(this, event)
    }
    render() {
        return <button onClick={this.handleSave.bind(this)}> ---- bind( )가 반환하는 함수 정의를 onClick에 전달한다.
            Save
        </button>
    }
}

---