React Portal

eeensu·2023년 8월 4일

React 기본

목록 보기

15/22

Portal

Portal은 react 애플리케이션에서 모달, 팝업, 툴팁과 같이 현재 컴포넌트 계층 구조의 바깥에 UI를 렌더링하기 위한 기술이다. 이를 통해 DOM 트리의 다른 위치에 컴포넌트를 렌더링할 수 있으며, 부모 컴포넌트의 스타일, 이벤트 처리 등과는 독립적으로 동작한다.

Portal의 주요 사용 사례는 다음과 같다.

모달 및 팝업
react 애플리케이션 내에서 모달 창이나 팝업과 같은 UI 요소를 렌더링할 때 사용한다. 이를 통해 모달이나 팝업이 컴포넌트 트리의 특정 위치에 제한되지 않고, 애플리케이션의 다른 부분과 독립적으로 렌더링될 수 있다.
툴팁
마찬가지로 툴팁과 같이 마우스 커서와 연관된 UI 요소를 렌더링할 때 사용된다. 특정 DOM 요소와 연결된 툴팁을 효과적으로 구현할 수 있다. 모달과 툴팁 모두 overflow: hidden 이나 z-index의 css요소를 통해 시각적으로 자식을 "튀어나오도록" 보여야 하는 경우, 이들을 DOM의 다른 위치에 자식을 삽입하는 것이 유용할 수 있다.

사용법

portal로 사용할 루트 작성
알다시피 react의 모든 컴포넌트는 public/index.html 의 <div id='root'></div> 에서 만들어진다. 하지만 Portal로 사용될 컴포넌트는 이 태그의 위치, 모양 등과 관계없이 항상 위에 그려져야하기에 Portal 전용 root element가 필요하다. 따라서 다음과 같이 <div> 를 추가해준다.

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

Portal 컴포넌트 작성
Portal로 사용할 컴포넌트를 React.createPortal() 함수를 통해 만들어준다.
첫번째 인자 혹은 children에는 portal에 들어간 컴포넌트가 들어가고, 두번째 인자에는 portal이 그려질 부모 element를 넣어준다.

const Portal: FC<{ children: ReactNode }> = ({ children }) => {
    const portal = document.getElementById('portal') as HTMLElement;
  
    return createPortal(children, portal);
};

Portal로 띄울 컴포넌트 작성 후 대입

const PortalExample: FC = () => {
    
    return (
        <div>
            <Portal>
                <ThankyouDialog />
            </Portal>         
        </div>
    );
};