리액트 이벤트 버블링 막기: 꼭 알아야 할 기본 개념과 예제

리액트를 다루다 보면 컴포넌트 내 이벤트가 상위 요소로 전파되는 "이벤트 버블링" 개념을 자주 접하게 됩니다. 특히 여러 계층의 컴포넌트가 중첩된 구조에서 특정 이벤트가 부모 컴포넌트로 전파되면 원하는 결과를 얻기 어렵거나 예기치 않은 동작이 발생할 수 있어, 개발자라면 이를 이해하고 효과적으로 관리하는 방법을 익혀 두는 것이 중요합니다.

리액트 이벤트 버블링 막기: 꼭 알아야 할 기본 개념과 예제리액트 이벤트 버블링 막기: 꼭 알아야 할 기본 개념과 예제

이벤트 버블링이란?

이벤트 버블링(Event Bubbling)은 HTML DOM의 이벤트 전파 방식 중 하나입니다. 이벤트가 발생한 요소(자식)에서 시작해 계층 구조의 상위 요소(부모)로 이벤트가 전파됩니다. 예를 들어, <div> 안에 있는 <button>을 클릭하면 이벤트가 버튼에서 발생하여 상위 <div>로 전달되는 방식입니다. 리액트는 가상 DOM을 활용하므로 이벤트가 브라우저의 실제 DOM에서 일어나는 방식과 약간 다르지만, 이벤트 버블링은 여전히 발생하며 동일하게 관리할 수 있습니다.

예제 코드: 이벤트 버블링을 이해하고 방지하는 방법

아래 코드는 중첩된 요소 구조에서 클릭 이벤트가 발생할 때 어떻게 이벤트가 전파되는지와 특정 요소까지만 이벤트를 제한하는 방법을 보여줍니다.

import React from 'react';

function App() {
  const handleDivClick = () => {
    alert('Div가 클릭되었습니다!');
  };

  const handleButtonClick = (event) => {
    event.stopPropagation(); // 이벤트 버블링 중지
    alert('Button이 클릭되었습니다!');
  };

  return (
    <div onClick={handleDivClick} style={{ padding: '20px', border: '1px solid black' }}>
      <p>이 영역을 클릭하면 Div의 클릭 이벤트가 발생합니다.</p>
      <button onClick={handleButtonClick}>버튼 클릭</button>
    </div>
  );
}

export default App;

코드 설명

  1. onClick 이벤트 핸들러 설정:
    • <div> 요소에 handleDivClick 핸들러를 추가하여 클릭 시 해당 이벤트가 발생하도록 설정했습니다.
    • <button> 요소에는 handleButtonClick 핸들러를 추가하여 클릭 시 버튼 이벤트가 발생하도록 했습니다.
  2. 이벤트 전파 방지:
    • handleButtonClick 함수에서 event.stopPropagation() 메서드를 호출하여 이벤트가 상위 <div>로 전파되지 않도록 설정했습니다. 따라서 버튼을 클릭하면 handleButtonClick만 호출되고, handleDivClick은 호출되지 않습니다.

결과 화면

  1. 버튼을 클릭하면 "Button이 클릭되었습니다!" 알림이 표시되며 이벤트는 button에서 종료됩니다.
  2. <div> 영역을 클릭하면 "Div가 클릭되었습니다!" 알림이 표시됩니다.

이벤트 버블링을 언제 활용할까?

버블링을 활용할 수 있는 상황은 다양합니다. 예를 들어, 특정 그룹의 요소에서 공통 작업을 수행하거나, 클릭한 요소에 따라 다른 작업을 설정할 때 유용합니다. 이벤트가 전파되는 방식과 이를 제어하는 방법을 이해하면 복잡한 UI에서 발생하는 예기치 않은 동작을 줄이고 코드의 가독성과 유지보수성을 높일 수 있습니다.

실무 팁: 이벤트 버블링 주의 사항

  • 핸들러 위치 고려: 최상위 요소에 핸들러를 두어 하위 요소의 모든 클릭을 처리하는 것도 좋은 방법이지만, 이는 큰 DOM 트리에서는 성능에 영향을 줄 수 있습니다.
  • 명확한 이벤트 관리: stopPropagation을 무분별하게 사용하면 디버깅이 어려워질 수 있습니다. 필요한 곳에서만 선택적으로 사용하는 것이 좋습니다.

이벤트 버블링에 대한 이해는 리액트 개발의 필수 요소입니다. 실무에서 보다 효율적이고 명확한 이벤트 처리를 위해 버블링과 그 제어 방법을 꼭 익혀두세요!