[React] React-Potal

React-Potal-참고블로그

✅ Modal

모달이란?
다이얼로그(팝업 형태로 창을 띄워 정보를 보여주는 것) 실행 시 포커스와 제어권을 독점하여 다이얼로그 종료 전까지 기존 화면을 제어할 수 없는 기능이다.

따라서 모달은 항상 화면의 최상위에 위치해야한다.

일반적인 구현은 모달이 필요한 컴포넌트 안에서 모달 컴포넌트를 렌더링하는 방식이다.

하지만 이렇게 하면 모달 컴포넌트가 최상위 컴포넌트가 되지 않을 수 있다.
이럴 때 사용하는 것이 Potal이다.

✅ React-Potal

React-Potal-참고블로그

React-Potal은 react-dom에서 사용할 수 있다.

ReactDOM.createPortal(child, container)

child는 렌더링할 모달 컴포넌트,
container는 child를 렌더링할 DOM Element를 넣어준다.

React-Potal로 모달 구현하기

① index.html
modal창을 렌더링할 DOM Element를 만들어준다.

<div id="root"></div>
<div id="modal"></div>

② Modal.js
createPortal return할 ModalContainer 생성

import { createPortal } from "react-dom";

function ModalContainer({ children }) {
  return createPortal(<>{children}</>, document.getElementById("modal"));
}
export default ModalContainer;

③ Like.js
모달로 띄울 컴포넌트를 ModalContainer로 감싸기

function Like({ onClose }) {
  return (
    <ModalContainer>
      <Overlay>
        <LikeListContatiner>
          <button onClick={() => onClose?.()}>Ⅹ</button>
        </LikeListContatiner>
      </Overlay>
    </ModalContainer>
  );
}
export default Like;