2019-04-21

React > Portal?

벨로퍼트

보통 React App은 HTML의 id=root 등의 어떤 한 div 안에 리액트 컴포넌트를 렌더링하며 시작한다.

...
<div id="root"></div>
...

Portal은 이 root div 바깥에 다른 div를 만들어 App과 분리되어 삽입된다.

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

이 div 엘리먼트는 다음 코드 중 ReactDOM.createPortal 메서드 호출시 가리키게 된다.

import ReactDOM from 'react-dom';

const ModalPortal = ({ children }) => {
  const el = document.getElementById('modal');
  return ReactDOM.createPortal(children, el);
};

export default ModalPortal;

이렇게 정의한 ModalPortal 컴포넌트를 App 안에서 불러오면 root div와 별개인 modal div에 컴포넌트를 렌더할 수 있다.

...
<ModalPortal>
  <MyModal /> // 이 컴포넌트가 modal div에 렌더된다.
</ModalPortal>
...

이렇게 하면 App에 공통적으로 내려받게 되는 css 스타일로부터 독립적이게 된다.

그런데 꼭 App 바깥의 다른 div에만 렌더하는 기능으로 제한되지 않으며, App 안에 렌더할때도 사용할 수 있다고 한다. 독립된 스타일을 주고싶을때 사용하게 되는 모양이다.

React-native에서는 이미 Modal이라는 컴포넌트가 현 스크린과 별도의 스크린을 띄우게 되어있고, App 안에서 모든 컴포넌트가 독립적인 css 스타일을 가지므로, 적용 필요성이 떨어진다.