SynthethicEVent와 NativeEvent

코드

function Parent() {
  const elementOne = document.getElementById('one');
  function handler() {
   console.log('mousedown on elementOne'); 
  }
  useEffect(() => {
    elementOne.addEventListener('mousedown', handler);
  }, []);
  return <div>
  	Parent here!
    <Child />
  </div>
}

function Child() {
  return <div onMouseDown={(e) => e.stopPropagation()}>
    Child here!
  </div>
}

Child를 클릭했을 때 Parent의 이벤트 리스너가 트리거되는 것을 막기 위해 e.stopPropagation()을 써도 작동하지않는다.

이유는 React에서는 event가 SyntheticEvent로 실제 DOM의 이벤트와 다르다.
DOM이벤트를 Wrapper로 만든 것이다.

elementOne.addEventListener는 이벤트를 실제 DOM 이벤트로 생성한것이므로 실제 DOM에 맞춰 대응을 해줘야한다.

React에서는 이 실제 DOM 이벤트를 e.nativeEvent로 맵핑해놓았다.
e는 SyntheticEvent이고 이 합성이벤트가 네이티브 이벤트에 맵핑되어있다.

e.nativeEvent를 통해 네이티브 이벤트에 접근한 후 아래와 같은 코드를 작성한다.

stopImmediatePropagation()

function Child() {
  return <div onMouseDown={(e) => e.nativeEvent.stopImmediatePropagation()}>
    Child here!
  </div>
}

이제 Parent의

elementOne.addEventListener('mousedown', handler);

실제 DOM이벤트와 상호작용하여 이벤트 버블링이 일어나는 것을 방지할 수 있게 되었다.

SyntheticEvent 끼리는 상호작용 가능

<div onMouseDown={(e) => console.log('mousedown on parent')}>
  Parent!
  <div onMouseDown={(e) => e.stopPropagation()}>
  	Child!
  </div>
</div>

Child! 클릭 시, 이벤트 버블링이 막혀 부모 태그의 onMouseDown이 트리거되지 않는다.