DOM 이벤트와 리액트 이벤트의 차이

 

 

1. DOM 이벤트

HTML과 순수 JavaScript를 사용한 DOM 이벤트

<button id="domButton">
  Click Me (DOM)
</button>

 

DOM에서는 이벤트를 처리할 함수를 문자열로 전달

---

 

 

2. React 이벤트 예제

React에서 SyntheticEvent를 사용하는 방식

<button onClick={reactButton}>
  Click Me (React)
</button>

 

리액트에서는 이벤트 이름을 카멜 표기법을 사용하며 함수 그대로 전달

 

 

3. 주요 차이점

특징	DOM 이벤트	React 이벤트
바인딩 방식	addEventListener로 DOM요소에 직접 이벤트 추가	JSX 문법에서 onClick, onChange등으로 이벤트 추가
이벤트 이름	소문자(onclick, onchange)	카멜 케이스(onClick, onChange)
이벤트 관리	이벤트가 전역적으로 등록, 수동으로 제거해야 함	React가 이벤트를 내부적으로 관리하여 클린업을 자동으로 처리
이벤트 객체	Event 객체 (event.stopPropagation()등 직접 호출)	React의 SyntheticEvent객체로 크로스 브라우저 호환성 제공
메모리 관리	이벤트마다 별도로 추가된 핸들러가 메모리를 차지	React에서 이벤트 핸들러는 이벤트 풀을 공유하여 효율적
버블링/ 캡처링	기본 DOM이벤트 흐름 그대로 사용	React의 이벤트는 기본적으로 버블링만 지원(캡처링 필요 시 설정)

 

 

React 이벤트의 장점

• 크로스 브라우저 호환성 : React의 SyntheticEvent는 브라우저 간 호환성을 제공
• 메모리 효율 : 이벤트 핸들러를 React가 한 곳에서 관리하므로 메모리 사용이 효율적
• 클린업 자동화 : React에서 컴포넌트가 언마운트 되면 자동으로 이벤트가 정리

 

DOM 이벤트 장점

• React없이 간단한 스크립트 작업 가능
• React의 의존성이 없으므로 가벼운 프로젝트에 적합