React Portal Dom 컴포넌트 구조 상관없이 렌더링 하는 방법

const AlertModal = ({title,desc})=> { 
	const domNode = document.getElementById(`modal`) 
    return ReactDom.createPortal( 
    	<div> 
        	<p>{title}</p> 
            <p>{desc}</p> 
        </div>, 
	domNode ) 
}

 

모달처럼 React 컴포넌트 트리와 실제로 렌더링되는 결과물 Dom과 일치 하지 않고 사용하는 경우가 있습니다.

 

그럴때는 ReactDom.createPortal 메소드를 사용하면 됩니다.

 

ReactDom.createPortal( 컴포넌트 , 렌더링될 장소 )

 

위 처럼 컴포넌트 구조와 상관없이  특정 dom에 렌더링 하는 것이 가능 합니다.