[React] Createportal을 이용해 특정 요소에 하위 요소 추가하기

안녕하세요, 피터팬입니다!

오늘은 Createportal을 이용하여 특정 요소에 하위 요소를 추가해보겠습니다.

Createportal은 DOM 계층 구조 바깥에 있는 DOM 노드(APP.js보다 상위요소)로 자식을 렌더링할 때 사용합니다.

 

적용법

react-dom으로부터 ReactDOM을 import해줍니다. (react아닙니다)

import ReactDOM from "react-dom";

 

사용법

ReactDOM.createPortal(요소,위치)

 

예시

# public>index.html

<div id="backdrop-root"></div>

# App.js

React.CreatePortal(
	<Backdrop />,
    document.querySelector('#backdrop-root')
)

 

=> 아래 그림처럼 #backdrop-root 아래에 Backdrop Component가 생성이 됩니다.

 

 

 

---

Reference

https://ko.reactjs.org/docs/portals.html

Portals – React