React createPortal

React의 createPortal은 컴포넌트를 일반적인 컴포넌트 트리 외부에 렌더링함.
이는 모달, 팝업 등을 만들 때 사용됨.

기본적으로 React 컴포넌트는 부모 컴포넌트 내에 렌더링되지만, createPortal을 사용하면 DOM의 어느 곳에서나 컴포넌트를 렌더링할 수 있다.

ReactDOM.createPortal(child, container)

위 함수는 첫 번째 인자로 자식 노드(렌더링할 React 엘리먼트), 두 번째 인자로 DOM 요소(해당 엘리먼트가 삽입될 위치)를 받는다.

ex)

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    <div className='modal'>
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

// 사용 예시
function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <Modal>
        <p>This is a modal</p>
      </Modal>
    </div>
  );
}

이 코드에서 Modal 컴포넌트 내부의 내용은 #modal-root라는 id를 가진 DOM 요소 안에 렌더링된다. 이 방식으로 모달 같은 요소들을 페이지 상의 어디서든 쉽게 배치할 수 있다.

주목할 점은, createPortal을 사용하더라도 이벤트 버블링이 정상적으로 동작한다는 것입니다. 즉, 포털 외부에서 발생한 이벤트가 포털 안쪽으로 전달되며 반대 경우도 마찬가지.