React Portal 기능 구성 요소

부모 구성 요소의 DOM 계층 구조 외부에 있는 DOM 노드로 자식을 렌더링하는 일급 방법은 포털에서 제공합니다. 이 기사에서는 ReactJS의 포털 기능 구성 요소를 사용하는 방법을 배웁니다.

ReactJS의 React Portal 기능 구성 요소

본질적으로 App 요소를 루트 요소 위에 마운트합니다. 기본 DOM 요소로 id 루트가 있는 div 요소를 사용하는 것이 실제로 표준 관행이 되었습니다.

애플리케이션의 모든 React 구성 요소는 브라우저의 DOM 트리를 보면 문장 안에 있는 루트 요소 아래에서 찾을 수 있습니다. 그럼에도 불구하고 React Portals를 사용하면 이 DOM 트리를 떠나 이 루트 요소 아래에 있지 않은 DOM 노드에 구성 요소를 렌더링할 수 있습니다.

이렇게 하면 부모-자식 계층 구조를 위반하고 구성 요소를 새 요소로 표시해야 합니다.

통사론:

ReactDOM.createPortal(child, container)

1. 첫 번째 인수는 요소, 문자열 또는 조각(자식)과 같이 렌더링 가능한 모든 것이 될 수 있는 하위입니다.
2. 컨테이너는 DOM 요소이며 두 번째 인수입니다.

자식 구성 요소는 부모 컨테이너를 시각적으로 종료해야 합니다. 아래 데모는 Portal의 가장 빈번한 사용 사례 중 하나입니다.

1. 모달이 있는 대화 상자
2. 호버카드
3. 플로팅 메뉴
4. 툴팁
5. 로더

React Portals를 사용할 때 다음 사항에 유의하십시오. 누군가를 알게 되지 않는 한, 이러한 경향은 즉각적으로 드러나지 않습니다.

1. 포털 노드가 DOM에 있는 위치에 관계없이 이벤트 버블링은 이벤트를 React 트리 선행 항목으로 전파하여 의도한 대로 작동합니다.
2. Portal을 통해 하위 요소를 렌더링할 때 React는 여전히 자식 요소의 수명 주기를 제어합니다.
3. React 구성 요소 트리는 HTML DOM 구조만 변경하는 포털의 영향을 받지 않습니다.
4. 포털을 사용하는 경우 HTML DOM 요소를 포털 구성 요소의 마운트 지점으로 지정해야 합니다.

다음 예를 사용하여 언급된 아이디어를 이해해 봅시다.

암호:

const PortalModal = ({message, isModalOpen, onClose}) => {
  if (!isModalOpen) return null;
  return ReactDOM.createPortal(
     <div className='modal'>
      <p>{message}</p>
      <button onClick={onClose}>X</button>
     </div>
    ,document.body);
  }
function Component() {
  const [modalOpen, setModalOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setModalOpen(true)}>Open Modal</button>
      <PortalModal
  message = 'Hello DelftStack Readers!'
       isModalOpen={modalOpen}
       onClose={
    () => setModalOpen(false)}
      />
    </div>
  )
}

위의 예에서 모달용 포털을 만들었습니다. 사용자가 버튼을 클릭하자마자 모달이 열리고 root 요소 외부에 나타납니다.

이 모달의 차원은 루트 계층 외부에서 렌더링되기 때문에 부모 구성 요소에 의해 상속되거나 변경되지 않습니다.

출력:

데모 실행