[React] 이벤트 버블링(bubbles, propagates)

 

리엑트에서 onScroll 이벤트를 제외한 모든 이벤트들은

부모 컴포넌트의 자식 컴포넌트에서 발생한 이벤트가 부모컴포넌트로 전파가 됩니다.

이를 "bubbles", "propagates"라고 합니다.

| 예시

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 함수를 호출시키면

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