리액트를 다루다 보면 컴포넌트 내 이벤트가 상위 요소로 전파되는 "이벤트 버블링" 개념을 자주 접하게 됩니다. 특히 여러 계층의 컴포넌트가 중첩된 구조에서 특정 이벤트가 부모 컴포넌트로 전파되면 원하는 결과를 얻기 어렵거나 예기치 않은 동작이 발생할 수 있어, 개발자라면 이를 이해하고 효과적으로 관리하는 방법을 익혀 두는 것이 중요합니다.
이벤트 버블링이란?
이벤트 버블링(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;코드 설명
onClick이벤트 핸들러 설정:<div>요소에handleDivClick핸들러를 추가하여 클릭 시 해당 이벤트가 발생하도록 설정했습니다.<button>요소에는handleButtonClick핸들러를 추가하여 클릭 시 버튼 이벤트가 발생하도록 했습니다.
- 이벤트 전파 방지:
handleButtonClick함수에서event.stopPropagation()메서드를 호출하여 이벤트가 상위<div>로 전파되지 않도록 설정했습니다. 따라서 버튼을 클릭하면handleButtonClick만 호출되고,handleDivClick은 호출되지 않습니다.
결과 화면
- 버튼을 클릭하면
"Button이 클릭되었습니다!"알림이 표시되며 이벤트는button에서 종료됩니다. <div>영역을 클릭하면"Div가 클릭되었습니다!"알림이 표시됩니다.
이벤트 버블링을 언제 활용할까?
버블링을 활용할 수 있는 상황은 다양합니다. 예를 들어, 특정 그룹의 요소에서 공통 작업을 수행하거나, 클릭한 요소에 따라 다른 작업을 설정할 때 유용합니다. 이벤트가 전파되는 방식과 이를 제어하는 방법을 이해하면 복잡한 UI에서 발생하는 예기치 않은 동작을 줄이고 코드의 가독성과 유지보수성을 높일 수 있습니다.
실무 팁: 이벤트 버블링 주의 사항
- 핸들러 위치 고려: 최상위 요소에 핸들러를 두어 하위 요소의 모든 클릭을 처리하는 것도 좋은 방법이지만, 이는 큰 DOM 트리에서는 성능에 영향을 줄 수 있습니다.
- 명확한 이벤트 관리:
stopPropagation을 무분별하게 사용하면 디버깅이 어려워질 수 있습니다. 필요한 곳에서만 선택적으로 사용하는 것이 좋습니다.
이벤트 버블링에 대한 이해는 리액트 개발의 필수 요소입니다. 실무에서 보다 효율적이고 명확한 이벤트 처리를 위해 버블링과 그 제어 방법을 꼭 익혀두세요!