이벤트 버블링에 대해 알아보자

이벤트 버블링이란?

이벤트 버블링은 한 element에 이벤트가 발생하면 할당된 핸들러가 동작하고, 다음으로 그 부모에 할당된 이벤트가 동작, 이를 최상단 element 요소까지 반복하며 할당된 핸들러를 동작시키는 것입니다.

import React from 'react'

function Example(){
	return(
      	<div {() => console.log("안녕하세요3")}>
      		<div {() => console.log("안녕하세요2")}>
      			<div onClick = {() => console.log("안녕하세요")}>
      				안녕하세요
      			</div>
      		</div>
      	</div>
    )
}

// console: 안녕하세요 -> 안녕하세요2 -> 안녕하세요3

버블링 중단하기

이벤트 버블링을 중단하기 위해서 event.stopPropagation()을 사용합니다.
이는 할당되어 있는 핸들러의 처리가 끝나면 버블링을 중단합니다.

import React from 'react'

function Example(){
	return(
      	<div {() => console.log("안녕하세요3")}>
      		<div {() => console.log("안녕하세요2")}>
      			<div onClick = {(e) => {
                	console.log("안녕하세요");
                  	e.stopPropagation();
                }}>
      				안녕하세요
      			</div>
      		</div>
      	</div>
    )
}

// console: 안녕하세요