React에서는 대부분의 컴포넌트가 기본적으로 돔 트리 내에서 렌더링됩니다. 그러나 때로는 특정 컴포넌트를 돔 트리의 외부에 렌더링하고 싶을 때가 있습니다. 이때 createPortal 메서드를 사용할 수 있습니다.
-
createPortal이란?
createPortal은 리액트에서 모달, 툴팁 또는 다른 부모 엘리먼트 내에서 렌더링되지 않아야 하는 컴포넌트를 만들 때 사용됩니다. 이 메서드는 새로운 돔 노드를 만들어 기존의 돔 트리 외부에 마운트합니다. -
사용 예시
<!-- public/index.html -->
<html lang="en">
<!-- 생략 -->
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="portal-root"></div>
<div id="root"></div>
</body>
</html>
import React from "react";
import ReactDOM from "react-dom";
function ModalOverlay(props) {
const content = (
<div className={`modal ${props.className}`} style={props.style}>
// 모달 구현부 생략
</div>
);
return ReactDOM.createPortal(content, document.getElementById("portal-root"));
}
코딩 배우기