React Portal

React Portal은 React 컴포넌트가 현재 DOM 계층 구조의 부모 자식 관계와 무관하게, DOM트리의 위치에 자식을 렌더링할 수 있게 하는 기능이다. 기본적으로 React 컴포넌트는 부모 컴포넌트 안에 렌더링되지만, 포탈을 사용하면 컴포넌트를 DOM 트리의 원하는 곳에 삽입할 수 있다.

React Portal은 모달, 툴팁, 드롭다운 메뉴 등 특정 컴포넌트가 부모 컴포넌트의 시각적 레이아웃에 의존하지 않고, 화면의 최상위 레이어에 나타나야 할 때 주로 사용된다.

createPortal

createPortal을 사용하면 일부 자식을 DOM의 다른 부분으로 렌더링할 수 있다.

import { createPortal } from 'react-dom';

// ...

<div>
  <p>This child is placed in the parent div.</p>
  {createPortal(
    <p>This child is placed in the document body.</p>,
    document.body
  )}
</div>

Portal은 DOM노드의 물리적 배치만 변경한다. 다른 모든 방식으로, portal에 렌더링하는 JSX는 이를 렌더링하는 React 컴포넌트의 자식 노드 역할을 한다.

매개변수

• children : JSX의 일부(예를 들어 <div /> 또는 <SomeComponent />), Fragment(<>...</>), 문자열이나 숫자 또는 이들의 배열과 같이 React로 렌더링할 수 있는 모든 것이다.

• domNode : document.getElementById()가 반환하는 것과 같은 일부 DOM 노드. 노드가 미리 존재해야 합니다. 업데이트 중에 다른 DOM 노드를 전달하면 portal 콘텐츠가 다시 생성된다.

• optional key: Portal의 key로 사용할 고유한 문자열 또는 숫자.

반환값
createPortal은 JSX에 포함하거나 React 컴포넌트에서 반환할 수 있는 React 노드를 반환한다. React가 렌더링 출력에서 이를 발견하면, 제공된 children을 제공된 domNode 안에 배치한다.

주의 사항
Portal의 이벤트는 DOM 트리가 아닌 React 트리에 따라 전파된다. 예를 들어, portal 내부를 클릭했을 때 포털이 <div onClick>으로 감싸져 있으면 해당 onClick 핸들러가 실행된다. 이로 인해 문제가 발생하면 portal 내부에서 이벤트 전파를 중지하거나 portal 자체를 React 트리에서 위로 이동해야한다.