React 공식 문서에서 createPortal에 대해 createPortal을 사용하면 일부 하위 항목을 DOM의 다른 부분으로 렌더링 할 수 있다고 설명하고 있습니다. React 애플리케이션을 작업하면서 overlay나 modal 컴포넌트를 만드는 과정을 접하게 될 수 있는데 이러한 컴포넌트들을 앱 내부에 위치하게 하는 것이 아니라 실제 앱의 제일 바깥 부분에 위치시키는 것입니다. 실제 사용 방식에 대해서 정리해 보겠습니다.
우선 실제 App 컴포넌트가 렌더링 되는 index.html 파일에 저희가 이동시킬 컴포넌트에 대상이 될 id가 overlays인 div를 생성해 줍니다.
createPortal은 세 가지 매개변수를 전달 받습니다.
createPortal(children, domNode, key?)
-
children: JSX 코드, a Fragment(<> ... </>), 문자열이나 숫자 등 리액트에서 랜더링 될 수 있는 무엇이든 가능합니다.
-
domNode: 컴포넌트가 렌더링될 대상 DOM node.
-
optional key: 포털의 키로 사용할 고유한 문자열 또는 숫자입니다.
실제로 Modal 컴포넌트에서 Backdrop, ModalOverlay 컴포넌트를 생성했고 portalElement에는 전에 index.html에서 생성한 id가 overlays인 div에 노드를 저장했습니다.
그다음 Modal 컴포넌트 Fragement 사이에 react-dom에서 createPortal 함수를 import 하여 사용했습니다.
이제 개발자 도구를 보면 아래 사진처럼 두 개의 컴포넌트가 root div 아래에 위치하지 않고 최상단인 overlays div에 위치하는 것을 볼 수 있습니다.
