Portals란
부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이다.
언제쓰나
overflow: hidden이나 z-index가 있는 경우, modal을 사용할때
<html>
<body>
<div id="app-root"></div>
</body>
</html>이 dom 노드 안에서 모달을 만들게 된다면 z-index를 맨앞으로 띄었음에도 맨앞으로 오지 않는 상황이 발생한다. 그 이유는 z-index는 자식에서 z-index를 사용하면 그 자식 부모안에서만 z-index가 유효하다.
<html>
<body>
<div id="app-root"></div>
<div id="modal-root"></div>
</body>
</html>그래서 다른 노드를 만들어서 modal을 만든다. 이렇게 하면 뒤에 위치한 modal-root가 app-root위에 오게된다.
Portal을 통한 이벤트 버블링
Portal이 root dom 트리 밖에 있더라도 react는 Portal을 root dom트리 안에 있는 것 처럼 해준다.
context같은 기능을 portal에서도 사용할 수 있고 이는 DOM 트리에서의 위치에 상관없이 portal은 여전히 React 트리에 존재하기 때문이다.
그래서 버블링도 된다.
출처
https://www.edwith.org/htmlcss/lecture/16620?isDesc=false
https://ko.reactjs.org/docs/portals.html
