react정리5 -portal

potal 사용

index.html

div overlays부분 추가한다

    <div id="overlays"></div>
    <div id="root"></div>

Modal.js

import { Fragment } from "react";
import ReactDOM from "react-dom";

import classes from "./Modal.module.css";
//potal 사용 위해 두 개의 컴포넌트 추가
const Backdrop = (props) => {
  return <div className={classes.backdrop}></div>;
};

//props.children은 모달이 사용되는 컴포넌트에서모달열기와 닫기 태그사이로 실제로 전달된 콘텐츠가 된다
const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};

//overlay div에 접근하기 위해 생성
const portalElement = document.getElementById("overlays");

//ReactDOM import후 potal작성
//각 컴포넌트에 대한 potal생성
//무엇을, 어디로 potal할지 속성 작성
//두번째 인자로 potalElement 전달
const Modal = (props) => {
  return (
    <Fragment>
      {ReactDOM.createPortal(
        <Backdrop onClose={props.onClose} />,
        portalElement
      )}
      {ReactDOM.createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}
    </Fragment>
  );
};

export default Modal;

cart컴포넌트에서 Modal import 후 div대신 적용해준다 

사용하려면 App.js에서 Cart import 후 확인

Cart.js

return (
    <Modal>
      {cartItems}
      <div>
        <span>Total Amount</span>
        <span>35.62</span>
      </div>
      <div className={classes.actions}>
        <button className={classes["button--alt"]}>Close</button>
        <button className={classes.button}>Order</button>
      </div>
    </Modal>
  );