본문 바로가기
Front-end/React\RN

리액트 포털 createPortal, HTML 이동

by javapp 자바앱 2023. 1. 11.
728x90

 

리액트 포털 !

렌더링된 HTML 내용을 다른 곳으로 옮기는 것

 

일반적으로 컴포넌트를 사용하는 곳에서는

createPortal 을 사용하여 해당 컴포넌트의 HTML 내용을 포털을 통해 이동시킬 수 있다.

 

 

입력 오류시 나타나는 배경흐림과

모달 컴포넌트를 index.html 내에 옮길 것이다.

 

index.html

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="backdrop-root"></div>
    <div id="overlay-root"></div>
    <div id="root"></div>
backdrop-root
overlay-root

추가

 

 

 

ErrorModal.js

import React from 'react';
import Button from './Button';
import Card from './Card';
import classes from './ErrorModal.module.css';

import ReactDOM from 'react-dom'

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

}

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.onConfirm}>확인</Button>
      </footer>
    </Card>
  );
}

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


export default ErrorModal;

 

 

f12를 통해 정적 분석

 

 

 

 


 

댓글