자바스크립트 애플리케이션을 개발할 때, 모든 모듈을 한 번에 로드하는 것은 효율적이지 않을 수 있습니다. 대규모 애플리케이션에서는 사용자가 실제로 필요로 하는 모듈만을 로드하는 것이 중요합니다. 이 때, React의 Suspense를 활용하면 모듈을 동적으로 로딩하는 유연한 방법을 사용할 수 있습니다.

Suspense는 React 16.6 버전부터 도입된 기능으로, 애플리케이션에서 비동기적으로 렌더링되는 컴포넌트나 리소스를 처리할 수 있게 해줍니다.

자바스크립트 모듈을 동적으로 로딩하기 위해서는 import() 함수를 사용할 수 있습니다. import() 함수는 Promise를 반환하며, 모듈을 비동기적으로 로드하고 해당 모듈의 default export를 가져올 수 있습니다.

아래는 Suspense와 import() 함수를 사용하여 모듈을 동적으로 로딩하는 예시입니다.

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <h1>애플리케이션</h1>
      <Suspense fallback={<div>로딩 중...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

export default App;

위 예시에서는 MyComponent를 동적으로 로딩하기 위해 React.lazy() 함수를 사용했습니다. React.lazy() 함수는 파라미터로 전달된 함수가 반환하는 Promise를 통해 컴포넌트를 비동기적으로 로드합니다. fallback prop은 로딩 중에 보여줄 JSX를 지정하는 역할을 합니다.

또한, Suspense 컴포넌트는 하나의 자식 컴포넌트를 가질 수 있으며, 해당 자식 컴포넌트에서 동적으로 로딩되는 컴포넌트들을 감싸주는 역할을 합니다. Suspense 컴포넌트는 로딩 중에 보여줄 JSX를 fallback prop으로 전달하는데, 이는 로딩이 완료되기 전까지 보여줄 컴포넌트나 메시지를 지정할 수 있습니다.

자바스크립트 모듈을 동적으로 로딩함으로써 애플리케이션의 성능을 향상시킬 수 있습니다. Suspense와 import() 함수를 사용하여 필요한 모듈을 필요한 시점에 로드하고, 사용자에게 로딩 중임을 알리는 UI를 제공할 수 있습니다.

참고 자료:

• React 공식 문서 - Suspense
• React 공식 문서 - Code Splitting