React - Portal 포털 알아보기

리액트를 배울 때 가장 많이 보이는 구조는 바로

ReactDOM.render(<App />, document.getElementById('root'));

 

이다. 

 

HTML 파일에 id:'root'인 div에 <App/>을 렌더링해주고

 

리액트로 열심히 컴포넌트 만들고 지지고 볶고 하면서 <App />에 넣어주는 구조이다.

 

 

여기서 의문점!

 

항상 root라는 div 에만 우리가 렌더링을 해야 하나?

 

당연히 아니다.

 

하지만 ReactDOM.render는 같은 페이지에서 복수로 일어날 수 없다.

 

예를 들어 

 

ReactDOM.render(<App />, document.getElementById('root'));

ReactDOM.render(<App2 />, document.getElementById('root2'));

 

이런 구조는 있을 없다는 것이다.

 

이를 해결해주는 것이 바로 Portal 이다. 

 

역시 최고는 공식문서다.

 

ReactDOM.createPortal( children 자식들, children을 렌더링할 dom) 이런 구조다. 

 

이런 구조에서 app-root에 <App/>을 렌더링하고

 

~createPortal( ~~~~~~, document.getElementById("modal-root"))을 하면

원하는 애를 app-root가 아닌 modal-root에 렌더링할 수 있다.

 

portal은 다이얼로그나 호버카드와 같은 것에서 사용한다고 한다.

 

원래 root보다 더 위에 실행되야 하는 것이 있다면 portal이 유용하게 쓰일 수 있다고 한다.