많은 웹 애플리케이션에서 모달 창을 사용하여 로딩 상태를 표시하고 사용자의 대기 시간을 최소화할 수 있습니다. 이러한 기능을 구현할 때 Suspense를 사용하여 로딩 상태를 관리할 수 있습니다. Suspense는 React의 내장 기능으로, 비동기적으로 데이터를 불러올 때 로딩 상태를 관리하고 자동으로 로딩 UI를 보여주는 역할을 합니다.

아래는 Suspense를 사용하여 모달 창의 로딩 상태를 관리하는 예시 코드입니다.

import React, { Suspense } from 'react';

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

function App() {
  const [showModal, setShowModal] = useState(false);

  const openModal = () => {
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      {showModal && (
        <Suspense fallback={<div>Loading...</div>}>
          <Modal closeModal={closeModal} />
        </Suspense>
      )}
    </div>
  );
}

export default App;

위의 예시 코드에서는 React.lazy를 사용하여 동적으로 Modal 컴포넌트를 불러옵니다. Suspense 컴포넌트는 import 함수 안에서 사용되며, fallback prop을 통해 로딩 중일 때 사용될 UI를 지정할 수 있습니다.

Modal 컴포넌트는 단순히 모달 창을 표시하는 역할을 하며, closeModal 함수를 통해 모달을 닫을 수 있습니다. 이 부분은 실제로 나타낼 모달 컴포넌트로 대체되어야 합니다.

이렇게 Suspense를 사용하여 모달 창의 로딩 상태를 관리하면, 데이터를 비동기적으로 불러올 때 사용자에게 로딩 UI를 보여줄 수 있고, 모달이 나타날 때까지 대기할 필요 없이 자연스럽게 전환됩니다.