createPortal

react-dom 에서 가져오며 한 컴포넌트에 랜더링되는 html 코드를 dom내의 다른곳으로 옮겨준다.

createPortal(children, domNode, key?)

포털을 생성하기 위해 JSX와 랜더링할 DOM노드를 createPortal에 전달하여 호출한다.

• children : React로 랜더링할 JSX코드 ( DOM노드 , 컴포넌트 ...)
• domNode : JSX코드가 전달된 부모 노드 ( document.body...), 이미 코드 내에 존재해야한다.
• 선택 사항 key : 포털의 키로 사용할 고유한 문자열이나 숫자

import { createPortal } from 'react-dom';

export default function MyComponent() {
  return (
    <div style={{ border: '2px solid black' }}>
      <p>This child is placed in the parent div.</p>
      {createPortal(
        <p>This child is placed in the document body.</p>,
        document.body
      )}
    </div>
  );
}

결과

• createPortal로 감싸진 p태그가 body태그의 안으로 이동했기 때문에
  border style을 가지고 있는 div태그에 영향을 받지 않는 것이다.

DOM 구조 확인

body>
  <div id="root">
    ...
      <div style="border: 2px solid black">
        <p>This child is placed inside the parent div.</p>
      </div>
    ...
  </div>
  <p>This child is placed in the document body.</p>
</body>