[React] Portal을 통한 이벤트 버블링

참고 문헌 : https://ko.legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals

Portals – React

 

이전 글에 이어서 Portal에 관하여 작성 합니다.

 

이벤트 버블링이란?

하위 요소에 있는 이벤트요소가 상위 요소로 전달이 되는 것을 이벤트 버블링이라고 합니다.

 

portal이 DOM 트리의 어디에도 존재할 수 있다 하더라도 모든 다른 면에서 일반적인 React 자식처럼 동작합니다.

context와 같은 기능은 자식이 portal이든지 아니든지 상관없이 정확하게 같게 동작합니다.

이는 DOM 트리에서의 위치에 상관없이 portal은 여전히 React 트리에 존재하기 때문입니다.

-> 라고 적혀있지만 조금 어렵게 느껴집니다...

 

 

이전 글에서 보았듯이 모달은 portal div안에 들어가 있습니다. 

하지만 모달 내부를 클랙해도 상위 요소에 이벤트 버블링이 발생하여 상위 요소에도 이벤트가 발생합니다.

 

그 이유는 

리액트 트리에서는 상위이기 때문에 이벤트 버블링이 가능한 것 입니다.