리액트 createPortal 사용하기

리액트는 트리구조로 위에서 아래로 작성하게 된다.

하지만 리액트의 portal을 사용하면, 하위 컴포넌트에서 상위 컴포넌트에 element를 넣을 수 있게 된다.

따라서 modal을 구현할 때 많이 사용되는 portal의 사용법에 대해서 알아보기로 하였다.

 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

리액트의 최상위 파일은 다음과 같이 createRoot로 이루어진다.

root라는 id를 갖는 element에 작성한 컴포넌트들이 삽입되게 된다.

App이 다음과 같이 작성되어있고, 그 하위에 TimeStamp에서 portal을 생성해보자.

import Main from "./components";
import "./App.css";

function App() {
  return (
    <Main>
      <Main.TitleName />
      <Main.Counter />
      <Main.TimeStamp />
    </Main>
  );
}

export default App;

TimeStamp는 App의 자식이다.

여기서 createPortal을 사용하게 된다.

🧉 createPortal은 첫 번째 인자로 삽입할 element가 들어가고 두 번째 인자로 삽입될 위치(부모 element)가 필요하다.

import { createPortal } from "react-dom";
import dayjs from "dayjs";

const TimeStamp = () => {
  const day = dayjs()
    .startOf("month")
    .add(1, "day")
    .set("year", 2022)
    .format("YYYY-MM-DD HH:mm:ss");

  return (
    <>
      <p className="main-time">{day}</p>
      {createPortal(
        <p className="body-time" style={{ position: "absolute", top: 0 }}>{day}</p>,
        document.body
      )}
    </>
  );
};

export default TimeStamp;

TimeStamp 컴포넌트는 시간을 두 번 보여주게 되는데, main-time 클래스의 p 요소는 기존의 컴포넌트로, Main 컴포넌트 하위에 위치하게 된다.

하지만, createPortal을 통해 만들어진 p 태그는 그보다 상위인 body 바로 아래에 위치하는 걸 확인할 수 있다.

 

 

https://beta.reactjs.org/reference/react-dom/createPortal

createPortal