Portal?

다른 공간과 연결된 관문 이다. 게임에서 많이 보이는데 포털을 통해 다른 곳으로 이동이 가능하다는 개념을 리액트에 적용해보겠다.

왜 사용하는가?

사용자에게 에러 메세지를 보여줄 때 모달창의 버튼을 조작하지 않으면 애플리케이션에 접근하지 못하도록 하는 경우가 더러 있다.
CSS속성을 이용하여 최상위 레이어에 컴포넌트를 나타내서 접근을 막을 수 있다.
하지만 모달 컴포넌트가 컴포넌트 트리의 하위에 있어서 DOM요소 깊숙히 있다면 어떨까?

물론 CSS속성으로 정상작동 한다. 하지만 최상위에서 하위 컴포넌트의 조작을 막는다는 의미에 가깝게 작동시키기 위해서 createPortal을 사용할 수 있다.

사용

ReactDom.createPortal(<이동시킬 JSX컴포넌트>, 위치)

index.html의 body의 첫번째 요소로 <div id='overlays'></div> 요소를 넣고 이동시킬 위치로 지정한다.
(그냥 body태그를 선택해도 될 듯 하다.)

import React from "react";
import classes from "./Modal.module.css";
import ReactDOM from "react-dom";

const Backdrop = (props) => {
  return <div onClick={props.onHideCart} className={classes.backdrop} />;
};

const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};

const portalElement = document.getElementById("overlays");

const Modal = (props) => {
  return (
    <React.Fragment>
      {ReactDOM.createPortal(
        <Backdrop onHideCart={props.onHideCart} />,
        portalElement
      )}
      {ReactDOM.createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}
    </React.Fragment>
  );
};

export default Modal;

이렇게 Modal컴포넌트를 실행시키면 어느 컴포넌트 트리에서 실행시키더라도 모든 컴포넌트 최상단에 위치하여 더 좋은 구조를 가진 애플리케이션을 가질 수 있다.