ReactDOM.createPortal로 모달 구현하기

// components/Modal.jsx
import ReactDOM from 'react-dom';

export default function Modal({ children, onClose }) {
  return ReactDOM.createPortal(
    <div className="overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.getElementById('modal-root')
  );
}

 

<!-- public/index.html 또는 _document.tsx에 추가 -->
<div id="modal-root"></div>

 

 

// 사용 예
<Modal onClose={() => setOpen(false)}>
  <h2>모달 내용</h2>
</Modal>