📚 Reference

• 공식 문서 1

📜 Chapter

Teleport

createPortal

• createPortal
• React Portal은 ReactDOM.createPortal(child, container) API를 사용해서 렌더링 트리 구조는 그대로 유지하되, DOM 계층 상 다른 위치에 자식을 렌더링 한다.

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    children,
    document.getElementById('modal-root') // 외부 DOM 노드
  );
}

• 렌더링 트리: React 내부에서 Modal은 부모 컴포넌트의 자식처럼 취급된다.
• DOM 트리: 실제로는 #modal-root (보통 body 하단에 있는 div) 밑에 렌더링된다.

특징

createPortal, Teleport - 비교