createPortal 이란?

• 보통 웹 페이지의 요소들은 부모-자식 관계를 이루면서 특정 순서대로 조직화되지만 때로는 이 순서를 벗어나 다른 위치에 요소를 둘 필요가 있을 때가 있음
• 이 때, createPortal은 리액트의 기능중 하나로 웹 페이지의 한 부분(예: 팝업창, 모달 등)을 다른 부분에 위치시킬 수 있게 해주는 도구임

모달 띄우기

createPortal

Parameters

createPortal(children, domNode, key?)

• children: Anything that can be rendered with React, such as a piece of JSX (e.g. <div /> or <SomeComponent />), a Fragment (<>...</>), a string or a number, or an array of these.

• domNode: Some DOM node, such as those returned by document.getElementById(). The node must already exist. Passing a different DOM node during an update will cause the portal content to be recreated.

• optional key: A unique string or number to be used as the portal’s key.

Returns

• JSX에 포함시킬 수 있는 React 노드를 반환함
• React가 이 createPortal로 생성된 React 노드를 렌더링 과정에서 만나게 되면, createPortal 함수에 전달된 '자식들'을 'domNode'라는 위치에 실제로 배치하게 됨
• 여기서 '자식들'이란 createPortal 함수의 첫 번째 인자로 전달되는 React 요소들을 말하고, 'domNode'는 두 번째 인자로 전달되는 DOM 요소를 말함

실제로 사용해보기

// App.js
import NoPortalExample from './NoPortalExample';
import PortalExample from './PortalExample';

export default function App() {
  return (
    <>
      <div className="clipping-container">
        <NoPortalExample  />
      </div>
      <div className="clipping-container">
        <PortalExample />
      </div>
    </>
  );
}

// PortalExample.js
import { useState } from 'react';
import { createPortal } from 'react-dom';
import ModalContent from './ModalContent.js';

export default function PortalExample() {
  const [showModal, setShowModal] = useState(false);
  return (
    <>
      <button onClick={() => setShowModal(true)}>
        Show modal using a portal
      </button>
      {showModal && createPortal(
        <ModalContent onClose={() => setShowModal(false)} />,
        document.body
      )}
    </>
  );
}

// ModalContent.js
export default function ModalContent({ onClose }) {
  return (
    <div className="modal">
      <div>I'm a modal dialog</div>
      <button onClick={onClose}>Close</button>
    </div>
  );
}

참고 자료

• createPortal
• [React] React Portal이란, React Portal로 modal 구현