리액트 합성이벤트(syntheticEvent)란? 합성 이벤트 정의와 종류, 사용

원하는 기능을 구현하기 위하여 syntheticEvent를 체크하던 중 싹 한 번 정리했으면 좋겠다는 생각이 들어 포스팅을 작성한다.

syntheticEvent는 한국말로 하면 합성 이벤트라는 뜻인데, 왜 react syntheticEvent가 생겨났을까?

이벤트 핸들러는 (사실 이벤트 핸들러 뿐 만 아니라 다른 것들도) 브라우저마다 이름이나 처리 방식등이 조금씩 다르다. 어떠한 브라우저에서 잘 동작하던 기능이 다른 브라우저에서는 오류나는 것이 그 이유이다. 이를 해결하기 위하여 리액트에서는 브라우저마다 서로 다른 이벤트를 모아 하나의 합성 이벤트로 제공해준다. 즉, 합성 이벤트를 사용하면 모든 브라우저에서 동일하게 동작하기 때문에 크로스 브라우징 문제를 해결할 수 있게된다.

즉, 다양한 브라우저들에서 일관된 속성을 가지도록 이벤트를 정의하는 것이다.

참고로 리액트에서 제공하는 합성 이벤트는 W3C에 따라 정의하지만 그 의미가 대응을 의미하지는 않는다. 예를 들어 합성 이벤트 중 onMouseLeave는 event.nativeEvent는 mouseout을 의미한다.

 

---

Clipboard 이벤트

onCopy onCut onPaste

 

 

Composition 이벤트
input 입력 시, 사용

onCompositionEnd onCompositionStart onCompositionUpdate

 

Keyboard 이벤트

onKeyDown onKeyPress onKeyUp

 

Focus 이벤트
form 뿐 만 아니라 모든 DOM element에 사용 가능

onFocus onBlur

 

Form 이벤트

onChange onInput onInvalid onReset onSubmit

 

Generic 이벤트
image나 body 등에만 사용되는 것 같은데, 어떤 글들을 보면 div에서도 된다고 한다. 테스트 결과 나는 div에서 실행되지는 않는다. 근데 또 image를 위한 이벤트가 따로 있는걸 보니 되어야 하는 것 같기도...

onError onLoad

 

Mouse 이벤트

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

 

Pointer 이벤트
포인터 이벤트는 Chrome, Firefox, Edge, IE에서 지원되며, 이 외 브라우저에서는 폴리필을 추가하여야 하다.

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

 

Selection 이벤트

onSelect

 

Touch 이벤트

onTouchCancel onTouchEnd onTouchMove onTouchStart

 

UI 이벤트
react 17부터 onScroll 이벤트는 버블링 되지 않는데, 엘리먼트가 중첩된 상황에서 가질 수 있는 혼동을 막을 수 있다.

onScroll

 

Wheel 이벤트

onWheel

 

Media 이벤트

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting

 

Image 이벤트

onLoad onError

 

Animation 이벤트

onAnimationStart onAnimationEnd onAnimationIteration

 

Transition 이벤트

onTransitionEnd

 

기타 이벤트

onToggle

 

 

https://reactjs.org/docs/events.html#gatsby-focus-wrapper

SyntheticEvent – React