Portal

Portal

React Portal은 DOM 요소를 다른 위치의 DOM 노드로 렌더링할 수 있게 해주는 기능을 제공합니다.

---

독힙적인 스타일 적용

기본적으로 React는 부모 컴포넌트가 렌더링되면 DOM 트리 구조에 따라 자식 컴포넌트가 렌더링되므로 부모의 CSS 스타일에 영향을 받아 의도와 다르게 보여질 수 있습니다.

React Portal을 사용하면 DOM 트리 상의 부모 컴포넌트의 영향에서 벗어나 독립적인 위치에서 렌더링되므로 CSS 충돌을 방지할 수 있습니다.

z-index 같은 후처리 불필요

---

여기서 한 가지 질문을 생각해볼 수 있습니다.

다른 위치의 DOM 트리로 렌더링 된다면 이벤트 바블링은 어떻게 처리 될까?

---

이벤트 버블링

React 공식 문서에는 Portal은 DOM 노드의 물리적 배치만 변경할 뿐, 이벤트는 React 트리에 따라 자식에서 부모로 버블링된다.라고 적혀있습니다.

즉, Portal로 만든 엘리먼트는 실제 DOM 구조와 달리 React 컴포넌트 트리 구조를 따르며 이벤트 또한 전파됩니다.

---

위 사진의 Modal 컴포넌트는 다른 위치에서 렌더링 되었지만 React 컴포넌트 트리에서는 여전히 내부에 위치하는 것을 확인할 수 있습니다.

---

createPortal()

ReactDom의 createPortal 메서드를 이용해서 원하는 컴포넌트를 Portal 시킬 수 있습니다.

• createPortal(children, domNode, key?)

  • children : Dom 노드의 childrend이 될 컴포넌트
  • domNode : children의 부모가 될 domDone
  • key : 포탈의 키로 사용할 고유한 문자열 or 숫자

• 예시 코드

  import reactDom from "react-dom";
  
  const Portal = ({ children, className }) => {
    const el = document.getElementById(className);
  
    return reactDom.createPortal(children, el);
  };
  
  export default Portal;