그다음 기존에 모달 컴포넌트를 createPortal을 사용해 포탈 박스 안으로 이동시킵니다.PlainJavaScriptTypeScriptJSXTSXRustBashC++C#CSSHTML/XMLimport ReactDOM from \"react-dom\";import styles from \"./index.module.css\";type Props = { open: boolean; onClose: VoidFunction;};const Modal = ({ open, onClose }: Props) => { if (!open) return null; // 포탈 박스 가져오기 const portalElement = document.getElementById(\"portal\"); // 포탈 박스 없으면 null if (!portalElement) return null; // 포탈 박스 있으면 이동 return ReactDOM.createPortal( <>
모달
, portalElement );};export default Modal;이런 식으로 코드를 작성하면 해당 컴포넌트가 물리적으로 \"\" 내부에 위치하게 됩니다.이에 따라 기존의 z-index 문제도 해결됩니다.또한 포탈로 생성한 부분이 부모 DOM 밖에 생성되지만 포탈은 여전히 리액트 트리에 존재하기 때문에리액트 트리에 포함된 상위 요소로 이벤트 버블링이 가능합니다.","image":"https://evcsbwqeetfvegvrtbny.supabase.co/storage/v1/object/public/blog-img/yonghunblog/1747976094695","datePublished":"2024-04-04T20:20:00","keywords":"React, Portal, Modal","url":"https://www.yonghun.me/posts/81","author":{"@type":"Person","name":"이용훈","url":"https://www.yonghun.me"},"publisher":{"@type":"Person","name":"이용훈","url":"https://www.yonghun.me"}}