[React.js] ReactDOM.createPortal

Portal

포탈은 부모 컴포넌트의 DOM 계층 구조 밖에 있는 DOM 노드로 자식을 렌더링하는 방법이다.

ReactDOM.createPortal(child, container)

첫번째 인자 child는 엘리먼트, 문자열, fragment와 같은 어떤 종류든 렌더링할 수 있는 자식을 넣고 두번째 인자 container는 DOM 엘리먼트를 넣어서 사용한다.

보통 렌더링 메서드에서 엘리먼트를 반환하면 부모 노드에서 가장 가까운 자식으로 마운트 되는데 다른 DOM의 다른 위치에 삽입할 때 Portal을 사용한다.

render(){
  return ReactDOM.createPortal(
    this.props.children, domNode
  )
}

위 코드는 this.props.children을 domNode라는 DOM에 렌더링한다.

 

참고: 리액트 공식 문서