*합성이벤트(SyntheticEvent)는 브라우저의 네이티브(고유) 이벤트를 감싸는 크로스 브라우저 래퍼입니다.*
다시 말하면, 한 단계 래핑된 이벤트 관련 객체를 통해, 이벤트를 처리하는 것이 SyntheticEvent 객체의 주요 의미입니다. 통상, SyntheticEvent 객체는 event 혹은 e(축약형태)로 작성하고, 내부 필드를 참조합니다.
stopPropagation()과 preventDefault()를 포함한 브라우저의 네이티브(고유) 이벤트와 API가 동일하며, 모든 브라우저에서 이벤트가 동일하게 작동합니다.
다음은 SyntheticEvent 객체 필드의 종류입니다.
bubbles
// 이벤트가 DOM을 통해 상위로 전파되는지 여부를 boolean 반환한다. (이벤트 버블링 : 하위에서 상위요소로 이벤트 전파)
cancelable
// 이벤트에 규정한 액션을 취소할 수 있는지 여부를 boolean 반환한다.
currentTarget
// 이벤트 핸들러가 부착된 DOM 요소를 반환한다. (event.target은 이벤트가 직접 발생한 DOM, 자식이 될 수도 있음)
defaultPrevented
// 해당 DOM의 기본 이벤트가 prevent 됬는지 여부를 반환한다. (preventDefault() 와 상관성 있음)
eventPhase
// 이벤트 흐름의 현재 실행단계를 반환한다. (0: NONE, 1: CAPTIRING_PHASE, 2: AT_TARGET, 3: BUBBLING_PHASE)
isTrusted
// 이벤트가 사용자 행위에 의해 발생되면 true, 스크립트로 생성/수정되거나 dispatchEvent로 보내졌으면 false
preventDefault()
// 해당 DOM의 기본 이벤트를 막는 역할의 메서드이다. void 타입으로 반환값이 없다.
isDefaultPrevented()
// 해당 이벤트 객체에서 preventDefault() 가 호출되었는지 여부를 반환한다.
stopPropagation()
// 여러 중첩된 DOM의 경우, 이벤트 타겟 외 DOM에 이벤트가 적용되지 않도록 버블링을 막는 메서드이다.
isPropagationStopped()
// 해당 이벤트 객체에서 stopPropagation() 이 호출되었는지 여부를 반환한다.
persist()
// React v16까지 비동기 콜백함수에서 합성 이벤트 활용을 위해 사용된 메서드이다. v17부터는 풀링 최적화로 불필요해짐.
target
// 이벤트 핸들러가 할당된 DOM에서 이벤트가 직접 발생한 DOM을 반환한다. 즉, 자식 컴포넌트가 될 수도 있음.
timeStamp
// 이벤트가 발생했던 시간을 밀리초 단위로 반환한다.
type
// 이벤트의 타입을 문자열로 반환한다. (click, load, error 등)