event Bubbling과 event 객체가 가지고 있는 함수중 하나인 stopPropagation()에 대해 알아보려고 한다.
우선 event란 무엇일까!
📝 MDN
Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.
- 이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자 액션에 의해 발생할 수도 있고, 혹은 비동기적 작업의 진행을 나타내기 위해 API가 생성할 수도 있습니다.
- 이벤트의 종류는 다양하며 일부는 Event 인터페이스의 파생 인터페이스를 사용합니다. Event 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다
- 많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"하는 코드를 실행할 수 있습니다. 이벤트 처리기는 대개 EventTarget.addEventListener()를 사용해 다양한 요소
(<button>, <div>, <span>), 등등 에 "부착"합니다. 그리고 제대로 추가한 경우, 반대로 removeEventListener()로 제거할 수도 있습니다.
🔎 주의점!
중첩된 많은 요소가 서로 자신만의 처리기를 가지고 있는 경우 이벤트 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소의 "공간 상 위치"가 겹쳐서 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 이벤트 확산과 캡처 설정에 따라 달라집니다. < -- (이벤트 버블링)
event 전파의 특성 중 하나인 이벤트 버블링
event 객체가 가지고 있는 stopPropagation 함수
event는 react 고유의 특성이 아니고, DOM 이벤트를 다루는 Javascript에서 나온 특성과 개념이다.
react는 Javascript 라이브러리 중 하나일 뿐이다.
우리가 네이버, 유튜브, 넷플릭스 사이트만 찾아봐도 여러 개수의 click 이벤트 callback 함수가 등록되어 있다.
하지만, 전부 같은 click 이벤트임에도 불과하고 서로 다른 기능을 한다.
하나의 웹사이트에 하나의 기능만 담당한다면 전혀 복잡할 것이 없지만 기능이 많아질수록 같은 이벤트라고 하더라도 다르게 동작해야 할 것들이 많아진다.
이런 이유를 기반으로 이벤트 제어가 복잡해지는 이유의 근본적인 이유는 html 태그들이 중첩된 구조를 가지고 있기 때문이다.
만약 그림에서 C를 누른다면 C만 눌린 것인가, B까지 눌린 것인가 아니면 전부다 눌린 것일까?
이벤트 버블링(Event Bubbling)
이벤트 전파(event propagation)
이벤트 전파란 이벤트가 발생했을 때, 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정을 의미합니다.
