React에서 Event 객체

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

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

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

버튼이 주어졌습니다. 클릭하여 Event 객체를 얻고 콘솔에 출력하세요.

버튼이 주어졌습니다. 클릭하여 콘솔에 클릭한 대상 event.target을(를) 출력하세요.