영화나 소설을 보다 보면 포탈을 통해 다른 장소, 다른 세계로 이동하는 장면이 나온다.
다른 장소로 이동할 수 있는 포탈이 React에서도 존재한다.

React는 React로 랜더링 할 수 있는 것이라면 무엇이든, 개발자가 지정한 특정한 element의 자식 요소로 보낼 수 있는 Portal 기능을 제공한다.

1. Portals 사용 방법

import { createPortal } from 'react-dom';
const ComponentA=()=>{
  //...
  return (
<div>
  <SomeComponent />
  {createPortal(children, domNode)}
</div>
    )
                     }

• children
  : react로 렌더링할 수 있는 모든 것 (ex: JSX, Fragment, string, number , 기타 등등)
  
• domNode
  : portal 의 이동 위치/장소가 되는 DOM node로, ⚠️반드시 현재 존재하는 DOM node여야 한다.

2. Portals 특징

Portal을 사용하면, DOM list에서 children은 domNode의 자식 요소로 존재하게 되지만 이벤트는 React tree를 따라 전파된다.

즉, ComponentA component에서 "portal-root"라는 id를 가지는 element에 "portal"이라는 id를 가지는 Portal component를 Portal을 해주었다고 가정해보자

• DOM list

	<div id="portal-root">
    	<div id="portal">
        </div>
    </div>

• React tree

	const ComponentA =()=>{
    	const [portal, setPortal]=useState(false);
    	const [data, setData] =useState("")
        return(
        	<div>
            	{portal &&
                	<Portal data={data}/>
                }
            </div>
        )
    }

Portal component는 DOM list상으로는 "#portal-root"의 자식 요소이지만,
props준 ComponentA의 data 값이 변경되면 Portal 속 data 값도 변경이 된다.

3. Portals 활용하기

React 공식 문서에서는 Portals이 활용될 수 있는 여러 상황에 대해 설명해놨다.

Portals 활용

1) Portals은 React로 빌드 되지 않은 곳, React dom이 아닌 곳에도 portals을 이용해 React node를 보내서 React를 활용할 수 있다.

2) dialog modal

이 중에서도 Portal이 유용하다고 생각했던 것은 modal이다.

Portals을 활용한 Modal

코드 작성

• index.html

...
<div id="modal-root">
 ...

• ModalPotal.tsx

import React, {ReactNode } from 'react';
import * as reactDOM from 'react-dom';

type ModalProps ={
  children:ReactNode
}
const Modal=({children}:ModalProps)=>{
  const modalEl = document.getElementById("modal-root") as HTMLElement;
  return reactDOM.createPortal(
    <div className='modal'>
      <div className="modal-background">
        <div className="modal-box">
          <div className="modal-inner">
            {children}
          </div>
        </div>
      </div>
    </div>
    ,modalEl);
};
export default  React.memo(Modal);

• App.tsx

const App =()=>{
	const [openModal, setOpenModal]=useState<boolean>(false)
  return(
  	...
    {openModal &&
    	<Modal>
       		<div>Open Modal</div>
       </Modal>
    }
  )

}	
    

Portals 을 이용한 Modal 실행 모습