컴포넌트-제대로-만들기.pdf

Portal Component

index.html

<link href="<https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap>" rel="stylesheet">
<div id="root"></div>
<div id="dialog"></div>

Dialog.js

import React from 'react'
import ReactDOM from 'react-dom'

class Dialog extends React.Component {
  render() {
    return ReactDOM.createPortal(
      <div className="dialog">
        <h2>Hello, React Bootcamp!</h2>
        <br/>
        <p>
          Ipsam ut sint omnis perspiciatis necessitatibus harum perspiciatis. Doloremque ex doloremque rerum sit ea aut quia. Qui molestiae soluta provident ipsam.
        </p>
      </div>,
      document.getElementById('dialog'),
    )
  }
}

export default Dialog