사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다.

ex) 버튼에 마우스 커서를 올렸을 때 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행하고, Form 요소는 값이 바뀔 때 onchange 이벤트를 실행하는 것

HTML에서 DOM 요소에 이벤트를 설정하는 방법은 다음과 같다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button **onclick="alert('excuted!')"**>
    Click Me!
  </button>
</body>
</html>

JS Bin

Untitled

이처럼 HTML에서는 이벤트를 실행하면 “ ” 사이에 있는 자바스크립트를 실행하도록 코드를 작성한다.
- 리액트에서 이벤트를 다룰 때는 이와 비슷하면서도 좀 다르다.

4-1. 리액트의 이벤트 시스템

4-1-1. 이벤트를 사용할 때 주의 사항

사용법은 일반 HTML에서 이벤트를 작성하는 것과 비슷한데, 몇 가지 주의해야 할 사항이 있다.