React에서 Modal, Popup Drawer 등을 구현할 때 컴포넌트 내부에서 구현을 하다보니 구조적인 관점에서 모달이 별도로 렌더링 된 것인지 알지 못하게 됩니다. 따라서 z-index를 사용하여 표현하거나 스타일링을 별도로 설정해야 합니다.
React Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법입니다.
<html>
<body>
<div id="root">...</div>
<div id="backdrop">...</div>
<div id="modal">...</div>
</body>
</html>Portal을 Modal은 app의 자식 컴포넌트지만 렌더링을 root와 형제 관계인 곳에서 하게 됩니다.
Portal의 사용 방법은 다음과 같습니다.
// Modal.js
function Modal() {
<>
{ReactDom.createPortal(
<BackDrop />, document.getElementById("backdrop")
)}
{ReactDom.createPortal(
<Modal />, document.getElementById("modal")
)}
</>
}
결론: Portal의 핵심은 렌더링된 HTML의 내용을 다른 곳으로 옮겨주는 것입니다.
