114. 포털 작업하기

ErrorModal 컴포넌트에서 React.Fragment를 사용할 수 있지만
또 Portal을 사용할 수 있다.

왜냐하면 이 모달 전체가 렌더링 되는 곳에 실제로 렌더링 되어서는 안되기 때문이다.

 

 

 

포털에는 두 가지가 필요하다
컴포넌트를 이동시킬 장소가 필요하고 그런 다음 컴포넌트에게 그 곳에 포털을 가져야 한다고 알려줄 필요가 있다
이제 그 장소를 표시하기 위해 public 폴더로 가자

 

public 폴더 내 index.html body 태그 내부에 두 가지 div 를 생성한다. 

    <div id="backdrop-root"></div>
    <div id="modal-root"></div>

 

 

 

리액트와 함께 제공되는 다른 라이브러리

즉 react-dom 라이브러리에 정의되어 있습니다

리액트는 일종의 라이브러리라고 생각할 수 있습니다

모든 리액트 기능, state 관리

애드온, 베이크 인 등이 있는 라이브러리요

그리고 react-dom은 그런 로직들과 기능들을

웹 브라우저로 가져오기 위해 리액트를 사용합니다

즉, 그것들이 DOM에서의 작업들과 호환되도록 해주는 라이브러리죠

즉, 리액트 라이브러리 자체는

여러분이 리액트를 DOM이 있는 환경에서 실행하는지 또는

네이티브 앱을 빌드하는 데 사용하는지에 대해 전혀 신경쓰지 않습니다

 

 

 

이제 ReactDom에서 createPortal 메소드를 호출할 수 있습니다

createPortal 메소드는 두 개의 인수를 취하는데요

첫 번째는 렌더링되어야 하는 리액트 노드입니다

여기서는 예를 들어 Backdrop을 렌더링할 수 있습니다, 이렇게요

여기서 중요한 것은 JSX여야 한다는 겁니다

따라서 이렇게 Backdrop이라고만 쓰면 안돼요

 

createPortal의 두 번째 인수는 포인터입니다

이 요소가 렌더링되어야 하는 실제 DOM의 컨테이너를

가리키는 포인터죠. DOM API를 사용한다. document.getElementById("backdrop-root")

 

중간에 target

index.js에 {createRoot} 를 추가했더니 해결되었다

import {createRoot} from 'react-dom/client';

 

ErrorModal.js

import React from "react";
import classes from "./ErrorModal.module.css";
import Card from "./Card";
import Button from "./Button";
import ReactDOM from 'react-dom';

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

const ModalOverlay = (props) => {
  return <div className={classes.modals}>
    <Card>
      <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}>Okay</Button>
      </footer>
    </Card>
  </div>;
};

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("modal-root"))}
    </React.Fragment>
  );
}

export default ErrorModal;

 

기존에 작동하던 HTML 코드를 다른 곳에서 작동하도록 Portal을 이용하는 방법을 배웠다

JSX 코드를 사용하는 어디에서나 ReactDOM.createPortal은 어디에서나 사용할 수 있다

물론 자바스크립트 코드를 호출하기 때문에 중괄호로 감싸야 한다.