[Front end] React 16 #3 portals

 

리액트 16의 두 번째 멋진 기능은 portals이다. 생각보다 유용해 보이지 않을 수 있는 데 사용하다 보면 유용함을 느낄 수 있다. 기본적으로 리액트는 div를 찾아서 마운트를 한다. 가끔은 리액트 root 밖에서 마운트를 해야 될 때가 있다

예를 들어 헤더가 root 밖에 있고 헤더의 타이틀 및 CSS를 변경하고 싶을 때 또는 다른 사이트를 로딩할 때 등이다. 이럴 경우 portals를 사용하면 된다. portals은 리액트 root 밖에서 리액트를 넣을 수 있도록 해준다.

span 태그에 id를 지정해서 만들고 컴포넌트에서 엘리먼트를 리턴하는 대신 portals을 리턴하면 된다.

import { createPortal } from 'react-dom';

const Message = () => 'Just Clicked';
class Portals extends Component {
  render() {
    return createPortal (<Message/>, document.getElementById('clickme'));
  }
}

react-dom을 import 하여 createPortal로 리턴하는데 portals에게 어디에 마운트 할지를 알려줘야 한다. 이때 span 태그의 id를 명시하며 된다. 다른 페이지를 로딩, iframe, 리액트 플러그인 등 리액트 외부 DOM에서 렌더를 할 때 유용하게 사용된다. 이게 portals이다.