createPortal – React

createPortal을 사용하면 일부 하위 요소를 DOM의 다른 부분으로 렌더링 할 수 있다.

Portal을 생성하려면 createPortal을 호출하고 JSX와 렌더링할 DOM 노드를 전달한다.

<div>
  <SomeComponent />
  {createPortal(children, domNode, key?)}
</div>

• Portal은 DOM 노드의 물리적 배치만 변경한다.
• Portal에 렌더링하는 JSX도 이를 렌더링하는 React 컴포넌트의 자식 노드 역할을 한다. 예를 들어, 자식은 부모 트리에서 제공하는 컨텍스트에 접근할 수 있고, 이벤트는 React 트리에 따라 자식에서 부모로 버블링된다.

주의사항

Portal의 이벤트는 DOM 트리가 아닌 React 트리에 따라 전파된다.

예를 들어, Portal 내부를 클릭했을 때 Portal이 <div onClick> 으로 감싸져 있으면 해당 onClick 핸들러 이벤트가 실행된다.

이로 인해 문제가 발생한다면, Portal 내부에서 이벤트 전파를 중단하거나 Portal 자체를 React 트리에서 위로 옮겨야 한다.

사용법

1. DOM의 다른 부분으로 렌더링하기

• Portal을 사용하면 컴포넌트 자식 중 일부를 DOM의 다른 위치에 렌더링할 수 있다. 이를 통해 컴포넌트의 일부가 그 컨테이너에서 escape(탈출) 할 수 있다.
• 예를 들어, 모달이나 툴팁을 페이지의 나머지 부분 위에 또는 외부에 표시할 수 있다.
• Portal을 생성하려면 createPortal의 결과를 일부 JSX와 함께 렌더링하고 Portal이 있어야 할 DOM 노드를 지정한다.
• React는 사용자가 전달한 JSX에 대한 DOM 노드를 사용자가 제공한 DOM 노드 안에 배치한다.