react) stopPropagation()란?

 

사이드바 작업을 하는 도중에,

button내부에 있는 img부분을 클릭해도 onClick이벤트가 동작을 안하는 문제가 있었음

실제로 해당 onClick부분에 콘솔을 찍어보면, 이미지를 클릭해도 값은 변경이 되지만 실제로 화면에서 동작은 안하는 상황

 

알아보니, 이벤트 버블링 문제였고 이를 해결하기 위해서는

e.stopPropagation() 해당 메서드가 필요했는데,

stopPropagation()란, JavaScript 이벤트 객체의 메서드로,

이벤트 버블링(event bubbling) 또는 이벤트 캡처링(event capturing)을 중단시키는 역할

 

*이벤트 버블링이란, 작은 단위의 이벤트부터 시작해서 상위 이벤트로 순차적으로 실행되는 개념

 

• 버블링: 자식 요소 -> 부모 요소
• 캡처링: 부모 요소 -> 자식 요소

 <button onClick={toggleMenu} className={styles.button} >
            {isOpen ? 
            <span>X</span> : 
            <img src="src/assets/images/frog.png" 
            alt="contact open button" 
            className={styles.openBtn} 
            
            onClick={(e) => {
              e.stopPropagation(); // 이벤트 버블링 방지
              toggleMenu();
            }}
            
            />
            }
          </button>