ReactDOM.createPortal(child, container);

render() {
    return ReactDOM.createPortal(
        this.props.children,
        domNode
    )
}

export class DemoDialog extends React.Component {
  #opennerRef = React.createRef(null);

  state = {
    show: false,
  };

  handleShowDialog = () => {
    this.setState({ show: true });
  };

  handleHideDialog = () => {
    this.setState({ show: false });
  };

  render() {
    return (
      <div className={styles.box}>
        <button
          ref={this.#opennerRef}
          type="button"
          className={styles.openDialogButton}
          aria-haspopup="dialog"
          aria-label="모달 다이얼로그 열기"
          title="모달 다이얼로그 열기"
          onClick={this.handleShowDialog}
        >
          모달열기
        </button>
        {this.state.show && (
          <Dialog
            modal
            onClose={this.handleHideDialog}
            openner={this.#opennerRef.current}
          >
            <Dialog.Header>
              <h3>불금 다이얼로그</h3>
            </Dialog.Header>
            <Dialog.Body>
              <ul>...</ul>
            </Dialog.Body>
          </Dialog>
        )}
      </div>
    );
  }
}

// Dialog.jsx
const { documentElement: htmlElement } = document;
const reactDomContainer = document.getElementById("root");

export class Dialog extends React.Component {
  #containerRef = React.createRef(null);

  handleClose = () => {
    this.props.onClose?.();
    this.props.openner.focus();
  };

  render() {
    const { modal = false } = this.props;

    return createPortal(
      <>
        <article
          ref={this.#containerRef}
          tabIndex={-1}
          role="dialog"
          aria-modal={modal}
          className={styles.container}
        >
          {this.props.children}
          <Dialog.Footer onClose={this.handleClose} />
        </article>
        {modal && <div className={styles.dim} onClick={this.handleClose} />}
      </>,
      document.getElementById("dialogZone")
    );
  }
}

export class Dialog extends React.Component {
    ...

#tabbableElements = [];

  #bindEscKeyEvents() {
    const handler = (e) => {
      if (e.key.toLowerCase().includes("escape")) {
        console.log("pressed esc key");
        this.handleClose();
      }
    };

    document.addEventListener("keyup", handler);

    // cleanup function
    return () => document.removeEventListener("keyup", handler);
  }

  #unbindEscKeyEvents = null;

  componentDidMount() {
    this.#containerRef.current.focus();
    this.#tabbableElements = getTabbableElements(this.#containerRef.current);
    this.settingKeyboardTrap();

    htmlElement.style.overflowY = "hidden";
    reactDomContainer.setAttribute("aria-hidden", true);

    this.#unbindEscKeyEvents = this.#bindEscKeyEvents();
  }

  componentWillUnmount() {
    htmlElement.style.overflowY = "visible";
    reactDomContainer.setAttribute("aria-hidden", false);

    this.#unbindEscKeyEvents?.();
  }

  settingKeyboardTrap() {
    const tabbles = this.#tabbableElements;
    const firstElement = tabbles[0];
    const lastElement = tabbles[tabbles.length - 1];

    firstElement.addEventListener("keydown", (e) => {
      if (e.shiftKey && e.key.toLowerCase().includes("tab")) {
        e.preventDefault();
        lastElement.focus();
      }
    });

    lastElement.addEventListener("keydown", (e) => {
      if (!e.shiftKey && e.key.toLowerCase().includes("tab")) {
        e.preventDefault();
        firstElement.focus();
      }
    });
  }
}

Dialog.Header = function DialogHeader({ children }) {
  return <header className={styles.header}>{children}</header>;
};

Dialog.Header.defaultProps = {
  children: <h2>React 포털로 연 다이얼로그(with 모달)</h2>,
};

Dialog.Body = function DialogBody({ children }) {
  return <div className={styles.body}>{children}</div>;
};

Dialog.Footer = function DialogFooter({ children, onClose }) {
  return (
    <footer className={styles.footer}>
      <button
        type="button"
        className={styles.closeButton}
        aria-label="모달 다이얼로그 닫기"
        title="모달 다이얼로그 닫기"
        onClick={onClose}
      >
        모달닫기
      </button>
      {children}
    </footer>
  );
};