[240708 TIL] Suspense Provider 분리사용

Suspense 컴포넌트를 Provider 또는 Layout처럼 분리하여 재사용하는 법을 알아보았습니다.
이렇게 하면 코드를 더 깔끔하게 유지하고, 여러 곳에서 Suspense 기능을 쉽게 사용할 수 있을 것 같습니다..

Step-by-Step Guide

1. SuspenseProvider 컴포넌트 생성:
   Suspense 컴포넌트를 감싸는 SuspenseProvider 컴포넌트를 생성하여, fallback UI를 중앙에서 관리할 수 있습니다.
2. App.js에서 SuspenseProvider 사용:
   SuspenseProvider 컴포넌트를 App 컴포넌트에서 사용하여, 하위 컴포넌트들이 지연 로딩되는 동안 보여줄 UI를 지정할 수 있습니다.

예제 코드

SuspenseProvider.js

import React, { Suspense } from 'react';

const SuspenseProvider = ({ children }) => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {children}
    </Suspense>
  );
};

export default SuspenseProvider;

ExternalComponent.js

import React, { lazy } from 'react';

const ExternalComponent = lazy(() => {
  return new Promise((resolve) => {
    const script = document.createElement('script');
    script.src = 'https://example.com/external-script.js';
    script.async = true;
    script.onload = () => {
      resolve({
        default: () => <div>External Component Loaded</div>,
      });
    };
    document.body.appendChild(script);
  });
});

export default ExternalComponent;

App.js

import React from 'react';
import SuspenseProvider from './SuspenseProvider';
import ExternalComponent from './ExternalComponent';

const App = () => {
  return (
    <div>
      <h1>My React App</h1>
      <SuspenseProvider>
        <ExternalComponent />
      </SuspenseProvider>
    </div>
  );
};

export default App;

코드 설명

1. SuspenseProvider.js:
   • Suspense 컴포넌트를 감싸는 SuspenseProvider 컴포넌트를 정의합니다.
   • fallback 속성으로 로딩 중 표시할 UI를 지정합니다.
   • children을 받아서 Suspense 컴포넌트로 감쌉니다.
2. ExternalComponent.js:
   • 외부 스크립트를 로드하고, 스크립트가 로드된 후에 컴포넌트를 반환하는 동적 컴포넌트를 정의합니다.
   • lazy와 Promise를 사용하여 스크립트를 로드하고 컴포넌트를 반환합니다.
3. App.js:
   • App 컴포넌트에서 SuspenseProvider를 사용하여 하위 컴포넌트를 감쌉니다.
   • SuspenseProvider 안에 ExternalComponent를 포함시킵니다.

장점

• 재사용성: SuspenseProvider를 생성함으로써, 여러 곳에서 동일한 fallback UI를 재사용할 수 있습니다.
• 중앙화된 관리: 로딩 상태 UI를 중앙에서 관리할 수 있어, 코드 유지보수가 쉬워집니다.
• 깔끔한 코드: Suspense와 fallback을 각 컴포넌트에서 정의하는 대신, 하나의 컴포넌트에서 관리함으로써 코드를 더 깔끔하게 유지할 수 있습니다.

이 접근 방식은 코드의 재사용성과 유지보수성을 높여줍니다. SuspenseProvider를 사용하여 다양한 컴포넌트에서 지연 로딩 상태를 쉽게 관리할 수 있습니다.