[React 공식문서] React의 이벤트 객체 (synthetic event)

합성 이벤트란?

 

정의 : React에서 사용하는 이벤트 객체로, 합성 이벤트(synthetic event)라고도 불립니다.

 

필요한 이유 : React가 브라우져마다 다르게 작동하는 브라우져 불일치 문제를 해결합니다.

 

특징 :

 

1. React는 Dom의 native 이벤트를 사용하지 않고 합성 이벤트를 사용합니다.

- native 이벤트 핸들러 처리 및 캡쳐링/버블링이 완료한 후, react 이벤트 핸들러가 처리됩니다.

- 대부분의 이벤트는 버블링 단계에서 호출됩니다. Capture 단계에서 필요하다면 이벤트 뒤에 Capture를 붙여서 호출하면 됩니다.

 

2. event의 표준 properties와 methods를 일부 가지고 있습니다.

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
void persist()
DOMEventTarget target
number timeStamp
string type

- 이를 통해서, 모든 브라우져에서 react의 추상화된 동일 인터페이스를 사용할 수 있게합니다. 이는 모든 브라우져에서 동일하게 이벤트를 처리할 수 있게합니다.

 

3. 실제 요소가 아닌 root에 이벤트 핸들러가 붙어있기 때문에 currentTarget과 type 등이 native event와 다를 수도 있습니다.

 

 

[참고자료]

react legacy - React SyntheticEvent : https://ko.legacy.reactjs.org/docs/events.html

react - React event object : https://react.dev/reference/react-dom/components/common#react-event-object