ReactDOM.createPortal
- React 애플리케이션에서 모달 창, 툴팁, 팝업 메뉴 등과 같이 기존의 컴포넌트 계층 구조 밖에 있는 DOM 요소에 React 컴포넌트를 렌더링하기 위한 메서드
- React의 일반적인 컴포넌트 렌더링 메서드인 render 메서드와 다르게 다른 DOM 요소로 렌더링하게 해준다.
용도
- 모달 창 또는 다이얼로그: 모달 창과 같은 팝업 요소를 렌더링할 때, 일반적으로 모달 창은 기존의 컴포넌트 계층 구조 밖에 렌더링해야 한다
- 포털(Portal): UI의 일부를 다른 부모 DOM 요소로 이동시키고 싶을 때 사용할 수 있다. 예를 들어, 스크롤 가능한 사이드바 내에서 고정된 헤더를 만들 때 사용할 수 있다.
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="portal-test"></div>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>import ReactDOM from 'react-dom';
const PortalComponent = ({ children }) => {
const portalRoot = document.getElementById('portal-root'); // 기존 컴포넌트 계층 구조 밖의 DOM 요소 선택
return ReactDOM.createPortal(
children,
portalRoot, // 컴포넌트를 렌더링할 대상 DOM 요소
);
};
// 사용 예시
const App = () => {
return (
<div>
<h1>React Portal Example</h1>
<PortalComponent>
<div>Rendered in portal</div>
</PortalComponent>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));위의 코드에서 PortalComponent는 portal-root라는 ID를 가진 DOM 요소로 컴포넌트를 렌더링한다. 이렇게 하면 PortalComponent 내부의 컨텐츠(children)는 portal-root 요소 안에 렌더링되며, 기존 컴포넌트 계층 구조 밖에서도 접근 가능하다.
ReactDOM.createPortal을 사용하면 React 컴포넌트의 재사용성과 유지보수성을 유지하면서 DOM 구조를 관리할 수 있다.
'IT > Front-End' 카테고리의 다른 글
| [HTML] 기초 (1) | 2023.10.17 |
|---|---|
| [React] vite + react로 github.io 배포하기 (0) | 2023.10.15 |
| [React] 자주 사용하는 Eslint Rules (0) | 2023.09.26 |
| [React] Webpack 마는 법 (0) | 2023.09.18 |
| Big projects are ditching TypeScript… why? 요약 (0) | 2023.09.11 |
