중첩된 div 클릭 이벤트 처리 방지 ( 이벤트 버블링 )

자꾸 까먹어서 메모용으로 작성

* 이벤트 버블링 이란 ?
이벤트가 발생 > 핸들러 동작 > 부모 핸들러 동작 > 과정 반복

부모 div 도 클릭 처리가 있고 내부 div 도 클릭이 있을 때 상위 부모 이벤트를 방지 -> stopPropagation() 호출
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

// 함수로 처리
function eventHandle(event) {
   event.stopPropagation();
}

// Vue.js 
<div @click="testFunction('부모 영역')">
  <div @click="(event) => { event.stopPropagation(); }">
  </div>
</div>

// React.js
<MenuDiv onClick={(event) => event.stopPropagation()} >