리액트 - 이벤트 속성

본 글은 <Do it! 리액트 모던 웹 개발 with 타입스크립트>를 참고해 공부한 내용을 정리한 글입니다.

이벤트 속성

모든 HTML 요소는 'on'으로 시작하는 이벤트 속성을 제공한다. 

 

마우스 클릭이나 텍스트 입력이 이루어지면 '이벤트가 발생했다'라고 표현한다.

특정 이벤트가 발생하면 실행할 자바스크립트 함수를 지정하는 데 사용되는 것이 이벤트 속성이다. 

이벤트 처리기

브라우저의 JS 엔진은 Event 타입을 제공한다. 

이벤트의 대상이 될 수 있는 객체는 EventTarget 인터페이스의 addEventListener, removeEventListener, dispatchEvent라는 세 가지 메서드를 구현한다.

 

addEventListener는 이벤트 처리기를 추가하는 메서드이다. 

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

여기서 

getElementById('root')?.addEventListener

부분을 보면 '?.'라는 연산자가 사용되었다. 이는 옵셔널 체이닝(optional chaining) 연산자로, getElementById가 null 값을 반환한다면 addEventListener 메서드는 호출되지 않는다. 

isTrusted 속성은 이벤트가 브라우저에서 발생하면 true, 프로그래밍으로 발생하면 false를 반환한다. 클릭 이벤트는 브라우저에서 발생했으므로 true값을 반환한다.

target 속성은 이벤트가 처음 발생한 HTML 요소를 나타낸다. 마우스클릭이 

<div>EventListener</div>에서 일어났으므로 이를 반환한다. 

 

bubbles 속성은 이벤트 버블링이 발생하는지 여부를 결정한다. 이에 대해서는 조금 뒤에 자세히 살펴보도록 하겠다.

 

DOM 객체의 이벤트 속성

addEventListener보다 편리하게 사용할 수 있는 '이벤트 속성'이 있다. onclick처럼 on으로 시작한다. 

 

window.onclick = (e: Event) => console.log('mouse click occurs.')

 

React 이벤트 속성

리액트에서는 이벤트 속성을 onClick처럼 카멜 표기법을 사용하여 나타낸다. 

export default function ReactOnClick() {
  const onClick = (e: SyntheticEvent) => {
    const {isTrusted, target, bubbles} = e
    console.log('mouse click occurs on <button>', isTrusted, target, bubbles)
  }

onClick 이벤트 핸들러는 'e'라는 매개변수로 모든 정보의 이벤트를 종합한 'SyntheticEvent'를 받는다. 

 

이벤트 버블링과 캡처링

이벤트 버블링(Event Bubbling)은 발생한 이벤트가 부모 요소로 전달되는 현상을 말한다. 따로 처리하지 않으면 최상위 부모 요소에 도달할 때까지 계속 전달된다. 

<div onClick={onDivClick}>
      <p>EventBubbling</p>
      <button onClick={onButtonClick}>Click me</button>
    </div>

버튼을 클릭하면 클릭 이벤트가 발생하고, 이는 버튼의 부모 요소인 <div>의 이벤트 처리기에도 전달되어 버블링이 발생한다.

 

이벤트 버블링을 멈추는 이벤트 캡처링(Event Capturing)을 하고 싶다면 stopPropagation을 사용한다. 

const onButtonClick = (e: SyntheticEvent) => {
    e.stopPropagation()
  }