React 노드 이벤트 정의하기
이벤트가 DOM 노드에 추가되듯 React 노드에도 이벤트가 추가될 수 있습니다. 아래의 코드 예제를 보시면, 아주 간단한 click과 mouseover 이벤트가 React <div> 노드에 추가되고 있습니다.
React에서 이벤트의 속성 이름이 'on'으로 시작되고, 어떻게 ReactElement() 함수에서 props 인수 오브젝트로 전달되는지 잘 살펴보세요.
React는 각 이벤트마다 이벤트의 디테일을 모두 담고 있는 SyntheticEvent(합성 이벤트)라 부르는 것을 만듭니다. 이 디테일은 DOM 이벤트에서 정의된 디테일과 유사합니다. 이벤트의 SyntheticEvent(합성 이벤트) 인스턴스는 이벤트 핸들러/콜백 함수에게 전달됩니다. 아래의 코드는 SyntheticEvent(합성 이벤트) 인스턴스의 디테일을 로깅하고 있습니다.
모든 SyntheticEvent(합성 이벤트) 오브젝트 인스턴스는 아래와 같은 속성들을 갖고 있습니다.
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type
사용되는 이벤트의 타입/카테고리에 따라 추가 속성은 다릅니다. 예를 들어 onClick SyntheticEvent(합성 이벤트) 이벤트는 아래와 같은 속성들도 가지고 있습니다.
boolean altKey
number button
number buttons
number clientX
number clientY
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
number pageX
number pageY
DOMEventTarget relatedTarget
number screenX
number screenY
boolean shiftKey
아래의 표는 각 이벤트의 타입/카테고리마다 각기 다른 SyntheticEvent 속성을 보여주고 있습니다.
| 이벤트 타입/카테고리: | 이벤트: | 이벤트 특유의 속성: |
|---|---|---|
Clipboard |
onCopy, onCut, onPaste | DOMDataTransfer, clipboardData |
Composition |
onCompositionEnd, onCompositionStart, onCompositionUpdate | data |
Keyboard |
onKeyDown, onKeyPress, onKeyUp | altKey, charCode, ctrlKey, getModifierState(key), key, keyCode, locale, location, metaKey, repeat, shiftKey, which |
Focus |
onChange, onInput, onSubmit | DOMEventTarget, relatedTarget |
Form |
onFocus, onBlur | |
Mouse |
onClick, onContextMenu, onDoubleClick, onDrag, onDragEnd, onDragEnter, onDragExit onDragLeave, onDragOver, onDragStart, onDrop, onMouseDown, onMouseEnter, onMouseLeave onMouseMove, onMouseOut, onMouseOver, onMouseUp | altKey, button, buttons, clientX, clientY, ctrlKey, getModifierState(key), metaKey, pageX, pageY, DOMEventTarget relatedTarget, screenX, screenY, shiftKey, |
Selection |
onSelect | |
Touch |
onTouchCancel, onTouchEnd, onTouchMove, onTouchStart | altKey DOMTouchList changedTouches, ctrlKey, getModifierState(key), metaKey, shiftKey, DOMTouchList targetTouches, DOMTouchList touches, |
UI |
onScroll | detail, DOMAbstractView view |
Wheel |
onWheel | deltaMode, deltaX, deltaY, deltaZ, |
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 | animationName, pseudoElement, elapsedTime |
Transition |
onTransitionEnd | propertyName, pseudoElement, elapsedTime |
메모
- React는 이벤트들이 다른 브라우저에서도 일관성 있게 동작하도록 하기 위해서 이벤트를 표준화합니다.
- React에서의 이벤트는 bubbling phase(발생 단계)에서 트리거됩니다. capturing phase(포착 단계)에서 이벤트를 트리거하려면, 단어 "Capture"를 이벤트 이름에 붙이면 됩니다. (예:
onClick은onClickCapture이 됩니다.) - 브라우저 이벤트의 디테일이 필요하다면, React 이벤트 핸들러/콜백으로 전달된 SyntheticEvent(합성 이벤트) 오브젝트의
nativeEvent속성으로 접근할 수 있습니다. - 사실 React는 노드 자체에 이벤트를 붙여놓지 않습니다. 대신 이벤트 위임자를 사용합니다.
- 이벤트 전달을 멈추기 위해서는
return false;하는 것 대신e.stopPropagation()또는e.preventDefault()를 수동으로 트리거해야 합니다. - React가 모든 DOM 이벤트를 제공해주는 것은 아닙니다. 하지만 직접 React 라이프사이클 메소드를 이용해서 사용할 수 있습니다.