React에서 Event 객체

이벤트 핸들러에 바인딩된 함수 내부에서는 Event 객체에 접근할 수 있습니다:

jsxfunction App() {
  function func(event) {
    console.log(event); // 이벤트 객체
  }
  
  return <div>
    <button onClick={func}>act</button>
  </div>;
}

event 변수에 들어가는 것은 브라우저의 원래 Event 객체가 아니라, React 측에서 제공하는 특별한 크로스 브라우징 래퍼입니다. 이 래퍼는 SyntheticEvent라고 불립니다. 이 래퍼는 모든 브라우저에서 이벤트가 동일하게 작동하도록 돕습니다. 여기에는 stopPropagation 및 preventDefault 메서드를 포함하여 네이티브 이벤트와 동일한 인터페이스가 있습니다.