React createPortal

📍개요

✅일부 JSX 조각을 React Root가 아닌 DOM의 일부분으로 렌더링할 때 사용

- 즉, 렌더링하고 싶은 JSX 조각을, 원하는 위치로 바로 연결되는 '입구' (Portal)를 만들고 싶을 때 사용

예) 팝업이나 모달 등

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

 

📍createPortal API

✅createPortal(children, domNode, key?)

- children : 새로 만들어낼 React 컴포넌트 (JSX 조각, fragment, 문자열, 숫자)

- domNode : 만든 컴포넌트를 렌더링할 부분. 이미 DOM에 존재하고 있는 곳이어야 함 (DOM API로 찾을 수 있는 곳)

- key (optional) : 포털의 키값으로 사용할 고유 문자열 또는 숫자 (배열을 렌더링할 때와는 다르게 안 써도 무방)

 

📍자식 컴포넌트이지만, 실제 위치는 react root 바깥으로 보내기

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>

 

 

⭐이 때, 포털로 텔레포트 시키는 JSX는,

물리적으로는 React Root 바깥에 위치하지만, 자식 컴포넌트로서 받아야 하는 영향은 잘 받음!

- 부모 컴포넌트의 컨텍스트에 접근 가능

- 부모 컴포넌트의 이벤트 버블링 영향 받음

 

📍createPortal로 Modal 만들기

- React로 모달을 만드는 경우 비교

 

- 실제 DOM

 

📍참고

https://react.dev/reference/react-dom/createPortal

createPortal – React