포털

포털 (Portal)

React 서브트리를 DOM의 다른 부분에 렌더링해 주는 컴포넌트예요. 콘텐츠를 앱 밖으로 옮겨서 오버플로우나 z-index 문제를 피할 수 있어요.

출처: 문서

본문

Portal은 React 서브트리를 DOM의 다른 부분에 렌더링해 주는 컴포넌트예요.

기능 (Features)

  • 어떤 React 서브트리든 앱(App) 밖으로 렌더링할 수 있어요.

  • 기본적으로 document.body에 추가되지만, 다른 컨테이너를 사용하도록 커스터마이즈할 수 있어요.

구조 (Anatomy)

컴포넌트를 임포트해요.

import { Portal } from "radix-ui";

export default () => <Portal.Root />;

기본 예제 (Basic example)

포털 프리미티브를 사용해 봐요.

import { Portal } from "radix-ui";

export default () => <Portal.Root>Content</Portal.Root>;

API Reference

Root

이 컴포넌트 안에 넣은 모든 것은 별도의 <div> 요소에 렌더링돼요. 기본적으로 이 요소는 document.body에 추가되지만, container prop을 사용해 다른 컨테이너를 선택할 수 있어요.

Prop Type Default
asChild boolean false
container HTMLElement No default value

더 알아보기 (Learn more)