[리액트] portal

portal은 부모 컴포넌트의 DOM 계층 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법
컴포넌트의 HTML 컨텐츠를 다른 곳에 옮길때 사용

<div>
<modal />
<component />
</div>

이런식으로 jsx코드 노드가 여러가지 있다고 치면 createPortal을 사용하여, 원하는 html 위치에서 렌더링 되게 할수있다.

이를위해 index.html 에서 id 가 “root”과 같은 위치에서 랜더링하고싶다면 옆에 <div id=“원하는이름”></div> 식으로 만들어주고
해당 컴포넌트 js에서 import '원하는이름' from ‘react-dom’ 해주고
js작성 구역에 아래와같이 해당 div 컴포넌트를 Backdrop 컴포넌트 함수안에 return으로 담아주고
return 부분에서 원하는 위치에서
ReactDom.createPortal(<실행시킬 컴포넌트 />, document.getElementById(‘렌더링할 위치)’ )