| 예시

import React from 'react';

import './style.css';

export default function App() {

return (

<div

className="parent"

onClick={() => {

console.log('1');

}}

>

<button onClick={() => console.log('2')}>children</button>

</div>

);

}

이런 식으로 부모요소를 클릭하면 콘솔에 1이 출력되고,

자식 요소인 버튼을 클릭하면 콘솔에 2가 출력되도록 해 보겠습니다.

그럼 이런 식으로 부모를 클릭했을 때 1이 출력되고,

자식 버튼을 클릭하면 버블링 현상으로 2와 1이 같이 출력이 됩니다.

| 방지

이벤트 핸들러들은 파라미터로 이벤트 객체라는 것을 받을 수 있는데 이를 이용하면 됩니다.

import React from 'react';

import './style.css';

export default function App() {

return (

<div

className="parent"

onClick={() => {

console.log('1');

}}

>

<button

onClick={(e) => {

e.stopPropagation();

console.log('2');

}}

>

children

</button>

</div>

);

}

이런 식으로 이벤트 객체를 받은 후 객체의 stopPropagation 함수를 호출시키면

해당 이벤트가 부모컴포넌트로 넘어가는 버블링 현상이 발생하지 않습니다.