2023-11-22 본 캠프 35일차 / 54일차 TIL

2023-11-22 본 캠프 35일차 / 54일차 TIL

주요 진행사항

- 팀프로젝트 진행

---

React에서 모달을 만들 때 방법을 찾아보다가, createPortal을 통한 모달 구현을 알게되었고 3개의 모달을 사용하는 이번 

프로젝트에서 적용시키면 좋을 것 같아 내용을 정리하였다.

React createPortal?

React에서 모달이나 팝업 창과 같은 요소를 현재 컴포넌트 트리에서 벗어나 다른 DOM 요소에 랜더링할 때 사용하는 메서이며, 주로 모달이나 툴팁과 같은 UI 요소를 전역적으로 표시하거나, 다른 부분에 랜더링할 때 사용하는 방법이다.

 

React createPortal으로 모달을 만드는 이유

일반적으로 모든 컴포넌트가 최초 root 내부에 트리에서 랜더링이 된다.

createPortal을 이용한다면 내부 트리가 아닌 외부의 새로운 경로에 포털을 만들기 때문에 전역적인 처리가 가능하다.

따라서 모달과 같은 독립적인 컴포넌트를 랜더링하는 좋은 방법이 될 수 있다.

 

사용 방법

1. 포탈을 열 곳을 선정 (이번 프로젝트에서는 index.html 에 선언)

// index.html

<div id="portal-root"></div>
<div id="root"></div>

 

2. 컴포넌트 내에 랜더링

import ReactDOM from 'react-dom';

const MyPortalComponent = () => {
  const portalRoot = document.getElementById('portal-root');

  useEffect(() => {
    const portal = document.createElement('div');
    portalRoot.appendChild(portal);

    return () => {
      // 컴포넌트가 언마운트될 때, portal-root에서 제거됩니다.
      portalRoot.removeChild(portal);
    };
  }, []); // 빈 배열은 컴포넌트가 마운트되고 언마운트될 때 한 번만 실행됩니다.

  return ReactDOM.createPortal(
    <div>
      {/* 여기에 전역적으로 랜더링되길 원하는 컴포넌트의 내용을 작성합니다. */}
      <p>This is a portal!</p>
    </div>,
    portalRoot
  );
};

export default MyPortalComponent;