[React] Portals

Portals

Fragment를 사용하면 깔끔한 코드를 작성할 수 있습니다.

React Portals은Fragment와 비슷한 일을 하여 간결한 코드를 작성하는데 사용됩니다.

부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법입니다.

ReactDOM.createPortal(child, container)

첫 번째 인자 child는 엘리먼트, 문자열, fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식 요소입니다.

두 번째 인자 container는 DOM 엘리먼트입니다.

사용법

일반적인 컴포넌트 렌더링 메서드에서 요소를 반환할 때, 해당요소는 부모 노드에서 가장 가까운 자식으로 연결됩니다.

portal의 전형적인 동작 방법은 부모 컴포넌트에 overflow: hidden이나 z-index가 있는 경우 이지만, 시각적으로 자식을 보여줘야 하는 경우가 있습니다. (다이얼로그, 호버카드, 툴팁, 모달 등)

// 일반적인 렌더링 방법
render(){
	return (
    	<div>
        	{this.props.children}
        </div>
    );
}

// Portal을 이용한 렌더링 방법
render(){
	return ReactDOM.createPortal(
    	this.props.children,
        domNode
    );
}

참고자료

https://ko.reactjs.org/docs/portals.html

Portals – React