4전 4전

리액트로 코드를 작성하면서 모달창을 만드는 경우가 많습니다. 언듯 보면 간단해 보이지만, 실제로는 예상하지 못한 복잡성을 내포하고 있습니다. 최근 저는 모달창을 구현하면서 z-index 관련 문제가 발생하였고, 이를 해결하기 위해 createPortal을 이용한 내용을 작성해보고자 합니다. | 문제 상황 문제 상황을 보기 위해 리액트 프로젝트를 만들고 간단한 모달창 하나를 만들어 보겠습니다. 먼저 props로 상태를 받아서 화면에 보여주고 닫을 수 있는 Modal 컴포넌트 하나를 만들어 주겠습니다. // Modal import styles from "./index.module.css"; type Props = { open: boolean; onClose: VoidFunction; }; const Moda..