Portal

Portal

Portal은 요소를 DOM 계층 구조 밖에 렌더링할 때 사용해요. ReactDOM.createPortal API를 그대로 감싼 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

Portal은 ReactDOM.createPortal API를 사용해 요소를 document.body의 끝이나 특정 컨테이너에 렌더링해요.

import { Portal } from "@chakra-ui/react"

<Portal>
  <div>Portal content</div>
</Portal>

예시 (Examples)

커스텀 컨테이너 (Custom Container)

container prop을 사용해 포털을 커스텀 컨테이너에 렌더링할 수 있어요.

import { Portal } from "@chakra-ui/react"

const Demo = () => {
  const containerRef = React.useRef()
  return (
    <>
      <Portal container={containerRef}>
        <div>Portal content</div>
      </Portal>
      <div ref={containerRef} />
    </>
  )
}

비활성화 (Disabled)

disabled prop을 사용해 포털을 비활성화할 수 있어요. 이 경우 children이 같은 DOM 계층 구조에 렌더링돼요.

import { Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Portal disabled>
      <div>Will render the content in place</div>
    </Portal>
  )
}

서버 렌더링 (Server Rendering)

SSR 중에는 Portal 컴포넌트가 콘텐츠를 바로 렌더링해요. 만약 하이드레이션 불일치(mismatch) 경고가 발생한다면, Portal 컴포넌트를 클라이언트 사이드에서만 조건부로 렌더링하는 것을 권장해요.

Props

Portal 컴포넌트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.

더 알아보기 (Learn more)