리액트 포털 createPortal, HTML 이동

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;

'Front-end > React\RN' 카테고리의 다른 글

리엑트네이티브 프로퍼티, 컴포넌트 나누기 (0)	2023.05.22
리액트네이티브 스타일링, FlatList (0)	2023.05.21
리액트 커스텀 컴포넌트 (0)	2023.01.10
리액트 스프링부트 연동 API Gateway , CORS 처리 (0)	2022.12.23
리액트 Styled Components , CSS 모듈 (0)	2022.12.20

Don't Quit ! DOIT 포기하지 말자

리액트 포털 createPortal, HTML 이동