createPortal()

자식 컴포넌트를 DOM 트리의 원하는 영역에 렌더링 할 수 있다.
모달을 만들 때 자주 사용된다.

createPortal(childrne, domNode, key?);

• children : jsx의 일부(<div></div>, <SomeComponent />) 문자열, 숫자 또는 React로 렌더링 할 수 있는 모든 것
• domNode : 반환할 DOM 노드. 노드가 이미 존재해야 하는 상태여야 한다. 업데이트 중에 다른 DOM 노드로 전달하면 Portal 콘텐츠가 다시 생성된다.
• key? : (Optional) Portal의 key로 고유한 문자열 또는 숫자이다.
  => 제공된 children을 제공된 domNode에 배치한다.

🤓 예제

import { createPortal } from 'react-dom';
export default function App(){
  return(
  	<div>
      <p>in DIV</p>
      {createPortal(
  		<p>BODY!</p>,
    	document.body
  	  )}
    </div>
  )
}