149. 리액트 Portal을 통해 모달 추가하기

import ReactDOM from 'react-dom';

Modal.js 에 아래와 같이 Portal을 사용하지 않아도 된다

const Modal = props => {
  return <Fragment>
    <Backdrop />
    <ModalOverlay>
      {props.children}
    </ModalOverlay>
  </Fragment>
};

 

하지만 사용해보겠다

Portal을 사용하기 위해서는 react-dom 에서 ReactDOM을 import 해야 함

import ReactDOM from 'react-dom';

무엇을 Portal 할 지와 어디로 Portal 할 지를 알려줘야 한다.

id가 overlays인 div을요, index.html 파일에

헬퍼 상수를 만든다

 

Modal.js

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

import classes from './Modal.module.css';

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

const portalElement = document.getElementsById('overlays');

const Modal = props => {
  return <Fragment>
    {ReactDOM.createPortal(<Backdrop />)}
    {ReactDOM.createPortal(<ModalOverlay>{props.children}</ModalOverlay>, portalElement)}
  </Fragment>
};

export default Modal;

 

그리고 App.js에 import