React Portal 사용법

Portal을 사용하기 위해서는 컴포넌트를 이동시킬 장소,  컴포넌트에게 그곳에 Portal을 가져야 한다고 알려주어야 합니다.

 

해당 장소를 표시하기 위해  public 폴더로 이동하여 index.htm 파일을 확인합니다.

 

index.htm 파일의 body 태그 부분에서 컴포넌트를 이동시킬 장소를 표시해줍니다.

 

id는 해당 위치로 찾아오기 위해 사용됩니다.

 

이렇게 컴포넌트를 이동시킬 위치를 설정해주었습니다.

 

const Backdrop = (props) => {
  return (
    <div className={classes.backdrop} onClick={props.onErrorHandler}></div>
  );
};

const ModalOverlay = (props) => {
  return (
    <Card className={classes.modal}>
      <header className={classes.header}>
        <h2>{props.title}</h2>
      </header>
      <div className={classes.content}>
        <p>{props.message}</p>
      </div>
      <footer className={classes.actions}>
        <Button onClick={props.onErrorHandler}>Okay</Button>
      </footer>
    </Card>
  );
};

const ErrorModal = (props) => {
  return <React.Fragment>
    
  </React.Fragment>;
};

다음은 Portal을 사용할 컴포넌트가 위치한 파일로 이동하여 별도의 컴포넌트를 생성해줍니다.

 

기존의 하나의 컴포넌트로 구성되어있던 것을 두 개의 개별 컴포넌트로 나누어 준 것입니다.

 

import ReactDOM from "react-dom";

다음으로 react-dom을 import 해줍니다.

 

 

react-dom을 import 한 ReactDOM에 createPortal() 메서드를 사용해줍니다.

 

createPortal() 메서드는 두 개의 인자를 받으며 첫 번째 인자는 렌더링 되어야 하는 리액트 노드(JSX)입니다.

 

두 번째 인자는  해당 요소가 렌더링 되어야 하는 실제 DOM의 컨테이너를 가리키는 포인터입니다.

 

 

결과

해당 장소에 위치한 것을 확인할 수 있습니다.

 

 

전체 코드

import React from "react";
import ReactDOM from "react-dom";
import Button from "./Button";
import Card from "./Card";

import classes from "./ErrorModal.module.css";

const Backdrop = (props) => {
  return (
    <div className={classes.backdrop} onClick={props.onErrorHandler}></div>
  );
};

const ModalOverlay = (props) => {
  return (
    <Card className={classes.modal}>
      <header className={classes.header}>
        <h2>{props.title}</h2>
      </header>
      <div className={classes.content}>
        <p>{props.message}</p>
      </div>
      <footer className={classes.actions}>
        <Button onClick={props.onErrorHandler}>Okay</Button>
      </footer>
    </Card>
  );
};

const ErrorModal = (props) => {
  return (
    <React.Fragment>
      {ReactDOM.createPortal(
        <Backdrop onErrorHandler={props.onErrorHandler} />,
        document.getElementById("backdrop-root")
      )}
      {ReactDOM.createPortal(
        <ModalOverlay
          title={props.title}
          message={props.message}
          onErrorHandler={props.onErrorHandler}
        />,
        document.getElementById("overlay-root")
      )}
    </React.Fragment>
  );
};

export default ErrorModal;