[React] Portal

리액트는 기본적으로 하나의 html 파일만 사용한다. 이때 특별한 조작을 하지 않는다면, 우리가 선언한 모든 컴포넌트들은 id = 'root' 인 실제 DOM상에 존재하는 노드의 자식이 된다. 그런데 경우에 따라 하나의 노드 아래에서 모든 것을 조작하는 대신, 여러개의 노드에서 컴포넌트들을 별개로 작동하도록 만들고 싶을지도 모른다. 이 경우 Portal을 이용한다.

Portal의 이용 방법은 다음과 같다.

import ReactDOM from 'react-dom';

ReactDOM.createPortal(component, real_obj)

Portal을 생성하는 createPortal은 react-dom 안에 있다. 이제 원하는 컴포넌트를 index.js 파일에서 render을 사용하듯이 사용하면 된다.

구체적인 예시는 다음과 같다.

const Modal = ({ title, message, onClick }: { title: string, message: string, onClick: () => void }) => {
    return ReactDOM.createPortal(
    <ModalOverlay
        message={message}
        onClick={onClick}
        title={title}
    />,
    document.getElementById('backdrop-root') as HTMLElement);
}

component 자리에는 단일 컴포넌트를 넣고, 이후 real_obj 자리의 경우 get~ 이나 querySelector등 특정 DOM상의 객체를 가져올 수 있는 함수를 이용하여 실제 DOM의 객체를 인자로 넣으면 된다.

위와 같이 작성한 코드에 대한 결과는 다음과 같다.

  html 상에서 backdrop-root에 Modal이 존재.

 

나타난 이미지의 모습

기존 id = 'root' 인 노드와는 별개로 id = 'backdrop-root'인 노드에서 Modal 컴포넌트가 나타나고 있다.