이벤트 버블링에 대해 정리한 포스트

문제 상황(ISSUE)

• React 애플리케이션에서 중첩된 요소들의 이벤트 핸들링 시 의도치 않은 이벤트 전파 발생
• 자식 버튼 클릭 시 부모 요소의 클릭 이벤트도 함께 실행되는 현상 발견
• 사용자 인터랙션의 정확한 제어가 필요한 상황

원인 분석(Root Cause)

1. DOM의 이벤트 버블링 특성으로 인한 문제

• 이벤트가 발생한 요소에서 시작하여 부모 요소로 계속 전파됨
• DOM의 트리 구조 특성상 하위 요소의 이벤트가 상위로 전달

2. React의 이벤트 위임 시스템과 연관

• React는 성능 최적화를 위해 이벤트 위임 방식 사용
• 실제 DOM 이벤트의 버블링 현상이 React 컴포넌트 트리에도 영향

결과 및 검증(Result)

**stopPropagation() 메서드 적용으로 문제 해결

const EventBubbling = () => {
  const outerClick = () => {
    console.log('부모 요소 클릭');
  }
  
  const innerClick = () => {
    console.log('자식 요소 클릭');
    event.stopPropagation(); // 이벤트 전파 방지
  }
  
  return (
    <div 
		onClick={outerClick} 
		style={{ backgroundColor: '#d0d0d0', padding: '20px'>
    		<button onClick={innerClick}>안쪽 버튼</button>
    </div>
	);
};

• 버튼 클릭 시 '자식 요소 클릭' 로그만 출력
• 부모 요소의 이벤트 핸들러가 실행되지 않음
• 의도한 대로 이벤트 전파가 차단됨

학습 포인트

• DOM 이벤트 전파 메커니즘의 이해

1. 버블링과 캡처링의 개념
2. 이벤트 전파 제어의 중요성

• React 이벤트 시스템의 특성 파악

1. 합성 이벤트(Synthetic Event) 시스템 이해
2. 이벤트 위임 방식의 장단점