1. root와 같은 레벨의 요소 추가
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
...
<body>
<div id="root"></div>
<div id="modal"></div>
</body>
</html>2. ModalPortal 컴포넌트 추가
// ModalPortal.jsx
import ReactDOM from 'react-dom';
const ModalPortal = ({ children }) => {
const el = document.getElementById('modal');
return ReactDOM.createPortal(children, el);
};
export default ModalPortal;3. Modal 컴포넌트 추가
이 방식은 해당 컴포넌트에 대한 상위 컴포넌트가 필요하다. 상위 컴포넌트에서 모달 노출 여부에 대한 상태값을 두고 조건부 렌더링한다.
// Modal.jsx
import ModalPortal from 'utils/ModalPortal';
const Modal = () => {
return (
<ModalPortal>
// <div id="modal"></div> 요소에 추가 될 부분
Modal Contents
...
</ModalPortal>
);
}