이벤트 버블링이란? (feat: stopPropagation)

이벤트 버블링(Event Bubbling)은 특정 DOM 요소에서 이벤트가 발생했을 때, 그 이벤트가 상위 요소들로 전파되는 과정을 말한다.
간단히 심플하게 쉽게 말해, 클릭이나 키보드 입력 같은 이벤트가 가장 깊숙한 요소에서 시작하여, 부모 요소를 통해 최상위 요소까지 "버블"(거품처럼) 올라가는 것.

이벤트 버블링이 발생하는 예시

import React from 'react';

const App = () => {
  const handleParentClick = () => {
    alert('Parent div clicked!');
  };

  const handleChildClick = () => {
    alert('Button clicked!');
  };

  return (
    <div onClick={handleParentClick} style={{ padding: '20px', border: '1px solid black' }}>
      <button onClick={handleChildClick}>Click Me</button>
    </div>
  );
};

export default App;

위 코드에서 button을 클릭하면, handleChildClick 함수와 handleParentClick 함수가 모두 실행된다. 이로 인해 "Button clicked!"와 "Parent div clicked!"가 차례로 알림 창에 표시된다. 이는 이벤트가 버튼에서 발생한 후 부모 div로 전파되기 때문이다.

이벤트 버블링을 막는 예시 (stopPropagation 사용)

개인적으로 이건 유용한 원리, 기능이라고 하기보다는 예상치 못한 변수에 가까웠다.
테이블 행안에 자식컴포넌트로 버튼이 있는데 그 버튼을 클릭하면 해당 테이블 행까지 선택되어버리는 문제가 발생했다.

import React from 'react';

const App = () => {
  const handleParentClick = () => {
    alert('Parent div clicked!');
  };

  const handleChildClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    event.stopPropagation(); // 이벤트 버블링 방지
    alert('Button clicked!');
  };

  return (
    <div onClick={handleParentClick} style={{ padding: '20px', border: '1px solid black' }}>
      <button onClick={handleChildClick}>Click Me</button>
    </div>
  );
};

export default App;

이번 예시에서는 handleChildClick 함수에서 event.stopPropagation()을 호출하여 이벤트 버블링을 막았다. 이제 button을 클릭하면 "Button clicked!" 알림만 표시되고, 부모 div의 handleParentClick 함수는 호출되지 않는다.

이와 같이, React에서 stopPropagation을 사용하면 특정 이벤트가 부모 요소로 전파되지 않도록 제어할 수 있다.