Q. 이벤트 버블링에 대해 설명

❓이벤트 버블링(Event Bubbling)

- DOM 요소들의 이벤트 전파방식 중 하나로, 특정 요소에서 이벤트가 발생했을 때 해당 요소의 부모 요소로 이벤트가 순차적으로 전파되는 현상
=> ex) 버튼을 클릭하면 해당 버튼의 클릭 이벤트 뿐만 아니라 그 버튼을 감싸고 있는 부모 요소들의 클릭 이벤트도 순차적으로 실행됨

- React는 실제 DOM 이벤트와는 약간 다른 방식으로 이벤트를 처리함

- React는 합성이벤트(Synthetic Event)라는 자체 이벤트 시스템을 사용하여 크로스 브라우징 이슈를 해결하고, 성능을 최적화 함
=> but!, 이 합성 이벤트도 실제 DOM의 이벤트 버블링과 캡처링 방식을 따름

- React에서 이벤트를 처리할 때, 일반적으로 이벤트 핸들러를 특정 컴포넌트의 특정 요소에 바인딩함.
  그럼에도 불구하고 이벤트 버블링 덕분에 하위 요소에서 발생한 이벤트가 상위 요소로 전파할 수 있음

🔑  결론

이러한 이벤트 버블링의 특성을 화용하면, 상위 컴포넌트엣 하위 컴포넌트들의 이벤트를 한꺼번에 처리하는 것도 가능함
ex. 리스트 안에 여러 아이템들에 개별 클릭 이벤트 핸들러를 설정하는 대신, 리스트 자체에 클릭 이벤트 핸들러를 설정하고, 이벤트 객체의 target 속성을 확인하여 어떤 아이템들이 클릭되어있는지 판별하는 것이 가능함
but! 때로는 이벤트 버블링을 원치 않을 경우도 있음.
그럴때는 e.stopPropagation()을 사용하여 이벤트의 버블링을 중지시킬 수 있음.
React의 합성 이벤트에서도 동일한 메서드를 사용하여 버블링을 중지시킬 수 있음.

이벤트 버블링은 DOM의 이벤트 전파 방식 중 하나입니다. 특정 요소에서 이벤트가 발생했을 때, 그 이벤트는 해당 요소에서 시작하여 부모 요소로 순차적으로 전파됩니다. 예를 들면, 버튼을 클릭했을 때 해당 버튼의 이벤트 외에도 그 버튼을 감싸는 부모 요소의 이벤트도 순차적으로 실행되는 것입니다.
React에서는 이벤트를 처리하는 방식이 실제 DOM과는 조금 다릅니다. React는 합성 이벤트라는 자체 이벤트 시스템을 사용해 크로스 브라우징 이슈를 해결하고 성능을 최적화합니다. 그렇지만 이 합성 이벤트 역시 실제 DOM의 이벤트 버블링과 캡처링 방식을 따르게 설계되었습니다.
React에서는 특정 컴포넌트의 요소에 이벤트 핸들러를 바인딩합니다. 그렇지만, 이벤트 버블링의 특성 덕분에 하위 요소에서 발생한 이벤트는 상위 요소로도 전파됩니다.
이 특성을 잘 활용하면, 상위 컴포넌트에서 하위 컴포넌트들의 이벤트를 한꺼번에 처리할 수 있습니다. 예를 들면, 여러 아이템들이 있는 리스트에서 각 아이템에 이벤트 핸들러를 개별적으로 설정하는 대신, 리스트 전체에 이벤트 핸들러를 설정하고, 이벤트 객체의 target 속성을 통해 클릭된 아이템을 판별하는 방식입니다.
그럼에도 때로는 이벤트 버블링을 원치 않을 때가 있습니다. 그런 상황에서는 e.stopPropagation() 메서드를 사용하여 버블링을 중단시킬 수 있습니다. React의 합성 이벤트에서도 이 메서드를 동일하게 사용하여 버블링을 멈추는 것이 가능합니다.