반응형
리액트 API 중에 createPortal이 있습니다.
createPortal
createPortal은 원하는 위치에 렌더링 할 수 있습니다.
부모 밖의 위치에 렌더링 할 수 있습니다.
문법
createPortal(children, domNode)
사용법
function App() {
return (ReactDOM.createPortal(<p>Hello React</p>, document.body))
}결과
위와 같이 사용하게 되면
documnet.body 아래에 렌더링 되게 됩니다.
<body>
<div id="root"></div>
<p>Hello React</p>
</body>모달 만들기 샘플
createPortal를 이용하여 모달 샘플입니다.
해당 컴포넌트가 아닌 body 레벨에 모달 컴포넌트가 렌더링 되었습니다.
const root = ReactDOM.createRoot(document.getElementById("root"));
function Modal(props) {
return (
<div className="overlay">
<div>Modal</div>
<button onClick={props.onClose}>Close</button>
</div>
);
}
function App() {
const [showModal, setShowModal] = React.useState(false);
return (
<>
<button onClick={() => setShowModal(true)}>Open</button>
{showModal &&
ReactDOM.createPortal(
<Modal onClose={() => setShowModal(false)}></Modal>,
document.body
)}
</>
);
}
root.render(<App />);See the Pen createPortal by powerku (@powerku) on CodePen.
728x90
반응형