[react] deepDive 10 Portals(포탈)

🎯 Wrapper 란?

=> 불필요한 중첩을 피하기 위해 사용하는 태그

Wrapper라는 컴포넌트를 만들어서 감싸는 역할을 하는 경우에는 아래와 같이 간단한 형태로 작성할 수 있음

이 컴포넌트는 자식 컴포넌트들을 감싸서 특정한 스타일이나 레이아웃을 적용할 때 사용될 수 있다

const Wrapper = (props) => {
  return props.children;
};
export default Wrapper;

 

🎯 Fragment 란?

=> 간결한 코드를 작성하는데 도움주는 태그

최종 페이지에 불필요한 HTML요소들이 표시 되지 않음

방법 1

<>
  <AddUser onAddUser={addUserHandler} />
  <UsersList users={usersList} />
</>;

방법 2

<React.Fragment>
  <AddUser onAddUser={addUserHandler} />
  <UsersList users={usersList} />
</React.Fragment>;

방법 3

import React, { Fragment } from "react";
    <Fragment>
      <AddUser onAddUser={addUserHandler} />
      <UsersList users={usersList} />
    </Fragment>

 

<div>태그 썼을때

<Fragment>태그 썼을 때

=> 화면에 <Fragment>태그요소가 나타나지 않음

 

🎯 portal

Portal은 React에서 부모 컴포넌트의 DOM 계층 구조에서 벗어나 다른 위치에 렌더링될 수 있게 하는 메커니즘
React 애플리케이션에서 모달 등의 오버레이 또는 다른 컴포넌트를 어떤 위치에도 렌더링하려는 경우에 사용됨

=>Portals는 특정 UI 요소를 DOM 구조에서 분리하여 렌더링하고 관리할 수 있게 해주어, 더 유연하고 강력한 UI 패턴을 구현할 수 있음

포탈을 사용하기 위해선 두가지가 필요함

🚪 컴포넌트를 이동시킬 장소

🔛 컴포넌트를 이동하겠다는 표시

 

1. 컴포넌트를 이동시킬 장소

public폴더에 컴포넌트를 이동시킬 장소를 명시해야함 

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

 

2. ReactDOM.createPortal

리액트에서 포탈을 생성한는 메서드

import ReactDOM from "react-dom";

ReactDOM.createPortal(child, container)

• child: 렌더링할 React 요소 또는 컴포넌트
• container: child가 렌더링될 대상 DOM 노드

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

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}>Okay</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;

 

🎯 왜 document.getElementById('portal-root') 이렇게 써주어야할까?

  {ReactDOM.createPortal(
        <Backdrop onConfirm={props.onConfirm} />,
        document.getElementById("backdrop-root")
  )}

document.getElementById('portal-root')는

ReactDOM.createPortal에서 자식 컴포넌트를 렌더링할 대상 DOM 노드를 지정하는 역할을 함.

 

왜냐하면 Portals를 사용할 때, React 컴포넌트는 일반적으로 부모 컴포넌트의 DOM 계층 구조 내에 렌더링되지만, ReactDOM.createPortal를 사용하면 특정한 DOM 노드로 컴포넌트를 이동시킬 수 있다