React Portal

React Portal

2022. 12. 30. 21:12ㆍ프로그래밍/React

React Portal

React Portal

부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로
자식을 렌더링하는 방법을 제공함
모달 창을 만들 때 주로 사용됨

ReactDOM.createPortal(child, container)

child : 렌더링할 수 있는 리액트 자식 요소

container : DOM 엘리먼트

자식 컴포넌트의 z-index 가 부모 컴포넌트보다 높더라도

부모 컴포넌트가 더 위로 올라오는 문제 해결 가능

index.html 에서 Container 생성

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div id="root"></div>
    <div id="portal"></div>
  </body>
</html>

createPortal 사용

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ open, children, onClose }) => {
  if (!open) return null;

  return ReactDOM.createPortal(
    <div>
      <div style={overlayStyle} />
      <div style={modalStyle}>
        <button onClick={onClose}>모달 닫기</button>
        {children}
      </div>
    </div>,
    document.getElementById('portal')
  );
};

export default Modal;

ReactDOM.createPortal 로 자식 컴포넌트 감싸주기
document.getElementById('portal') 로 요소 찾아주기

root 요소와 portal 요소가 동등한 계층 구조에 존재하게 됨

이벤트 버블링 가능

이벤트 버블링 : 중첩된 자식 요소에서 이벤트 발생 시 이벤트가 부모로 전달되는 것

portal로 생성한 부분이 부모 DOM 외부에 생성되더라도
portal은 여전히 리액트 트리에 존재하기 때문에
리액트 트리에 포함된 상위로 이벤트 버블링이 가능함

DOM 트리에서 상위가 아니더라도

리액트 트리에서 상위일 경우 이벤트 버블링 가능 !