11.14 TIL Portals(modal)

React 공식 문서에 따르면 포털은 다음과 같다.

Portals

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.

외부에 존재하는 DOM노드를 React App DOM 계층에 존재하는 것 처럼 연결해주는 역할을 한다. 따라서 이 기능은 모달 컴포넌트를 만드는데 용이하다.

사용 방법 (Modal 만들기 )

const Backdrop = (props) => {
  return (
    <div className={classes.backdrop} onClick={props.onClick}>
    </div>
  );
};
const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};

const portalElement = document.getElementById("overlays");

{ReactDOM.createPortal(<Backdrop />, portalElement)}
{ReactDOM.createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}

{/* ReactDom.createPortal(무엇을,어디에 ) */}