3.5.3 이벤트 객체

리액트에서는 이벤트가 발생하면 해당 이벤트 핸들러 함수가 호출되고, 이벤트 객체(event object)가 매개변수로 전달됩니다. 이때 전달되는 이벤트 객체는 웹 브라우저에서 제공하는 기본 DOM 이벤트 객체(native DOM event object)와는 다릅니다.

리액트는 웹 브라우저의 기본 이벤트를 감싸서 만든 자체 이벤트 객체인 합성 이벤트(synthetic event)를 사용합니다. 이는 웹 브라우저마다 이벤트 객체의 동작 방식이 조금씩 달라 이를 일관되게 처리하기 위해서입니다. 이를 ‘크로스브라우저 호환성(cross-browser compatibility)을 확보한다’고 표현합니다.

합성 이벤트는 기본 DOM 이벤트와 거의 동일한 속성과 메서드를 제공하므로 일반 DOM 이벤트처럼 사용할 수 있습니다.

● 이벤트 객체와 인라인 핸들러

인라인 핸들러에서는 이벤트 객체를 함수의 매개변수로 직접 받아 사용할 수 있습니다. 예를 들어, 다음 코드는 <button> 요소에서 클릭 이벤트가 발생했을 때 이벤트 객체를 받아 콘솔에 출력합니다.