React의 해결책은 브라우저 내장 이벤트를 감싸는 것이다. 웹 페이지를 실행하는 브라우저의 구현에 관계없이 이벤트가 W3C 명세를 따르도록 만들었다. 내부적으로 React는 합성 이벤트(SyntheticEvent)를 위한 특별한 클래스를 사용한다. SyntheticEvent 클래스의 인스턴스를 이벤트 핸들러에 전달하는 것이다. 예를 들어 합성 이벤트 객체에 접근하려면 다음 예제 코드 6.3처럼 이벤트 핸들러 함수에 인자로 event를 추가할 수 있다. 또한, 그림 6-8처럼 이벤트 객체를 콘솔에서 확인할 수 있다.

 

예제 코드 6.3 합성 이벤트를 받는 이벤트 핸들러

class Mouse extends React.Component {
    render() {
        return <div>
            <div
                style={{border: '1px solid red'}}
                onMouseOver={((event) => { ---- event 인자를 정의한다.
                    console.log('mouse is over with event')
                    console.dir(event)})}> ---- 합성 이벤트 객체에 접근해서 console.dir로 콘솔에 노출하도록 한다.
                    Open DevTools and move your mouse cursor over here
            </div>
        </div>
    }
}

---

 

▲ 그림 6-8 상자에 마우스 커서를 올리면 개발자 도구 콘솔에서 이벤트 객체를 출력한다.