이벤트 핸들러가 한 번 실행되고 나면 합성 이벤트는 null이 되어 더 이상 사용할 수 없다. 그래서 같은 이벤트 핸들러가 실행된 후에 이벤트 객체에 접근하기 위해 전역변수에 담거나 콜백함수에서 비동기적으로 사용하려고 생각한 사람도 있을 것이다. 예를 들면 다음 예제 코드처럼 이벤트 객체에 대한 참조를 전역변수 e에 저장한다고 생각해보자(ch06/mouseevent/jsx/mouse.jsx).

 

예제 코드 6.5 합성 이벤트는 이벤트 핸들러 실행 후 null이 된다.

class Mouse extends React.Component {
    handleMouseOver(event) {
        console.log('mouse is over with event')
        window.e = event // 안티패턴
        console.dir(event.target) ---- 이벤트 객체와 속성을 메서드에서 사용한다.
        setTimeout(() => {
            console.table(event.target)
            console.table(window.e.target) ---- 기본적으로 이벤트를 비동기 콜백함수나 전역변수에 담아 사용할 수 없다.
        }, 2345)
    }
    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>
    }
}

---