handleMouseOver()라는 이름은 5장에서 살펴본 라이프사이클 이벤트와는 달리 임의로 정한 것이며, 자기 자신이나 함께 일하는 팀이 이해할 수 있는 이름이라면 규칙을 따를 필요는 없다. 대부분의 경우, React에서 이벤트 핸들러를 작성할 때는 일반적인 클래스 메서드와 구분하기 위해 handle을 앞에 붙이고 mouseOver 같은 이벤트 이름을 넣거나, save처럼 수행하는 동작을 이름으로 사용한다.

 

예제 코드 6.4 이벤트 핸들러를 클래스 메서드로 작성하고 render( )에서 바인딩한다.

class Mouse extends React.Component {
    handleMouseOver(event) {
        console.log('mouse is over with event')
        console.dir(event.target)
    }
    render() {
        return <div>
            <div
                style={{border: '1px solid red'}}
                onMouseOver={this.handleMouseOver.bind(this)}>
                    Open DevTools and move your mouse cursor over here
            </div>
        </div>
    }
}

---