React Portal

React Portal은 React에서 컴포넌트를 현재 DOM 트리 외부에 렌더링할 수 있게 해주는 기능.
주로 모달, 툴팁, 드롭다운처럼 화면 상단에 표시되는 UI 요소에 사용됨.
ReactDOM.createPortal()을 사용해 컴포넌트를 다른 DOM 노드에 렌더링할 수 있고, UI 요소의 위치와 스타일을 독립적으로 제어할 수 있음.
이를 통해 더 깔끔하고 유연한 UI 구성이 가능함.

const Portal = ({ children, destId }) => {
return ReactDOM.createPortal(
children,
document.getElementById(destId)
);
};

이런식으로 포탈을 컴포넌트화하고,

  <Portal destId={'backdrop-root'}>
    <BackDrop onClose={onClose} />
  </Portal>

  <Portal destId={'overlay-root'}>
    <ModalContent
      title={title}
      message={message}
      onClose={onClose}
    />
  </Portal>

이런 방식으로 사용하면 좋을듯함.