[ React ] Portal 이란 무엇인가

Portal이란?

포탈하면 가장 먼저 생각나는 녀석

게임이나 영화등에 나오는 물체를 순간이동 시키는 신기한 공간을 만들어내는 것을 포탈이라고 하죠.

React 에서 사용하는 포탈도 비슷한 개념입니다. 부모 요소 밑에 있는 자식 요소를 부모 요소보다 더 위로 보내주는 역할을 하는 Portal 을 알아봅시다.

 

Portal

부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법 입니다.

 

import React from "react";

const App = () => {
  return (
    <div>
      <h1>안녕하세요</h1>
      <h2>리액트</h2>
      <Portal>
        <h1>포탈</h1>
      </Portal>
    </div>
  );
};

export default App;

import React from "react";

const Portal = ({ children }) => {
  return ReactDOM.createPortal(children, document.getElementById("portal"));
};

export default Portal;

이렇게 하면, id가 portal인 DOM 요소 밖에 h1 태그가 렌더링됩니다.
modal을 만들 때, 모달이 하위 컴포넌트에 의해 렌더링되는 것이 아니라, 최상위 컴포넌트에 의해 렌더링되도록 하고 싶을 때, Portal을 사용할 수 있습니다.

 

Reference

•