02장-5 | Notion

프로젝트 만들기

npm start

이벤트란?

화면 UI를 다루는 모든 프레임워크는 사용자가 화면 UI에서 버튼을 누르거나 텍스트를 입력하는 등의 행위가 발생하면, 이를 화면 UI를 구현한 코드 쪽에 알려줘야 한다.

사용자 행위가 일어날 때 이벤트가 발생했다고 표현한다.

Event Type: 자바스크립트 엔진은 Event 타입을 제공한다.

Event 타입의 주요 속성

종류	설명
`type`	이벤트 이름으로 대소문자를 구분하지 않는다.
`isTrusted`	이벤트가 웹 브라우저에서 발생한 것인지(true), 프로그래밍으로 발생한 것인지(false)를 판단한다.
`target`	이벤트가 처음 발생한 HTML 요소이다.
`currentTarget`	이벤트의 현재 대상. 이벤트 버블링 중에서 이벤트가 현재 위치한 객체이다.
`bubbles`	이벤트가 DOM을 타고 버블링될지 여부를 결정한다.

EventTarget 타입

HTMLElement의 부모 인터페이스 상속 구조
- HTMLElement는 최상위 EventTarget 타입을 시작으로 Node, Element와 같은 타입을 상속한다.
```
graph BT
    HTMLElement --> Element
    Element --> Node
    Node --> EventTarget
```
EventTarget은 addEventListener, removeEventListener, dispatchEvent라는 3개의 메소드를 제공한다.

<aside> ✅ 이벤트 처리기 : 이벤트를 기다리는 콜백 함수

이벤트가 발생할 때까지 기다리다가 이벤트가 발생하면 해당 이벤트를 코드 쪽으로 알려주는 역할을 한다.

</aside>

프로젝트: 이벤트 리스너

DOM_객체.addEventListener(이벤트_이름: string, 콜백_함수: (e: Event) => void)

document.getElementById('root')?.addEventListener('click', (e: Event) => {
	const {isTrusted, target, bubbles} = e
	console.log('mouse click occurs.', isTrusted, target, bubbles)
})
document.getElementById('root')?.addEventListener('click', (e: Event) => {
	const {isTrusted, target, bubbles} = e
	console.log('mouse click also occurs.', isTrusted, target, bubbles)
})

export default function EventListener() {
	return <div>EventListener</div>
}

?.는 타입스크립트의 optional chaining 연산자이다.
- getElementById 메소드가 null 값을 반환하면 해당 연산자는 addEventListener 메소드를 호출하지 않는다.
getElementById()의 파라미터 id인 root의 정체는 public/index.html의 <div id='root'> 태그의 것이다.
'click'은 string 타입의 이벤트 이름, (e: Event)는 콜백 함수를 의미한다.