(TIL 43일차) SyntheticEvent와 nativeEvent

SyntheticEvent와 nativeEvent

• 이벤트 발생 시, 이벤트 핸들러는 SyntheticEvent(일반적인 이벤트 객체)의 인스턴스를 전달
• 일반적으로 우리가 사용하는 event 객체는 native event 객체가 아니라 래핑된 이벤트 객체인 Syntheticevent를 사용.

Synthetic

• stopPropagation 과 preventDefault 를 포함하여 브라우저의 기본 이벤트(nativeEvent)와 동일한 인터페이스를 보유
• 리액트에서는 우리가 native event를 필요로 할 때 사용할 수 있도록 이벤트 안에 nativeEvent 객체를 부여 했기에 우리는 접근해서 사용 가능

event.nativeEvent.stopImmediatePropagtion())

nativeEvent

• 이벤트 버블링을 방지하기 위해 event.stopPropagation을 사용

---

예시

class App extends React.Component {  
  render() {    
    return(      
      <div
        onEventA={(evt) => console.log('onEventA')}
        onEventB={(evt) => console.log('onEventB')}>
          <div onEventAFmaily={(evt) => evt.stopPropagation()} />
      </div>    
    )  
  }
}

• onEventA와 onEventB가 다른 SyntheticEvent에 속해 있고 onEventAFamily는 onEventA와 같은 SyntheticEvent
• 만약 onEventAFamily를 클릭하면 이벤트 버블링으로 인해 부모 div의 이벤트도 발생하지만, evt.stopPropagation() 메서드 호출로 전파를 막고(해당 dispatch 뒤에 있는 것들은 실행되지 않을 것이다)
• onEventA와 onEventB 모두 실행되지 않아야 하지만. 안타깝게도 다른 SyntheticEvent에 속한 ‘onEventB’는 콘솔에 출력(edge-case)

결론

• 이것을 토대로 알 수 있는 것은 **evt.stopPropagation() 으로도 막을 수 없는 이벤트들이 있다는 것이다(evt.nativeEvent.stopImmediatePropagation())
• 이것을 알게 됐으니 앞으로도 유용하게 써먹을 기회가 분명히 있을 것이다.

---

• https://medium.com/tapjoykorea/%EB%A6%AC%EC%95%A1%ED%8A%B8-react-%EC%9D%98-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%95%B8%EB%93%A4%EB%9F%AC-event-handler-syntheticevent-nativeevent-3a0da35e9e3f
  참고 사이트