먼저, 필요한 모듈을 가져옵니다:

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';

다음으로, 포털을 렌더링할 컴포넌트를 작성합니다:

const PortalComponent = React.lazy(() => import('./PortalComponent'));

function App() {
  return (
    <div>
      <h1>리액트 포털 예제</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <PortalComponent />
      </Suspense>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

위의 예제에서, PortalComponent를 포함하는 컴포넌트 App을 작성합니다. Suspense 컴포넌트는 fallback prop을 통해 로딩 중에 표시할 컴포넌트나 메시지를 제공합니다. 이 예제에서는 “Loading…“이라는 간단한 텍스트를 사용하였습니다.

PortalComponent는 Suspense 컴포넌트 안에서 렌더링되며, 비동기적으로 로드됩니다. 이로 인해 포털 컴포넌트가 로딩되는 동안 로딩 상태를 관리할 수 있게 됩니다.

위의 예제에서 PortalComponent는 외부 요소에 렌더링되지만, Suspense를 사용하여 로딩 상태를 관리할 수 있는 다른 컴포넌트에도 적용할 수 있습니다.

이 방법을 사용하면 로딩 중에 사용자에게 로딩 상태를 표시할 수 있고, 사용자 경험을 향상시킬 수 있습니다.

참고 문서:

• 리액트 공식 문서 - Suspense
• 리액트 공식 문서 - 포털(Portal)
• React.lazy() - 코드 스플리팅