2021년, 우리는 React 17을 사용해 마이크로 프론트엔드 아키텍처를 배포했습니다. 당시 권고에 따라 react와 react-dom을 공유 싱글톤 모듈로 설정했고, 이를 통해 앱 전체가 하나의 React 트리로 렌더링되었습니다. 이제 주요 의존성들이 React 18을 요구하고 React 19 출시가 다가오는 상황에서, 마이크로 프론트엔드의 React를 업그레이드해야 합니다. 여러 팀이 함께 작업하는 만큼 작은 단계로 나눠 진행해야 합니다.

브리지 컴포넌트 도입

2026년 업데이트: 이후 우리는 자체 마이크로 프론트엔드 React 브리지 패키지를 오픈소스로 공개했으며, 자세한 내용은 마이크로 프론트엔드 React 브리지 오픈소스 공개에서 확인할 수 있습니다. 이 글에서는 @module-federation/bridge-react 패키지를 활용한 초기 접근 방식을 설명합니다.

마이크로 프론트엔드를 별도의 React 트리로 렌더링하기 위해 “브리지” 컴포넌트 래퍼를 추가했습니다. 이렇게 하면 셸에 영향을 주지 않고 마이크로 프론트엔드의 React를 업그레이드할 수 있습니다.

@module-federation/bridge-react 패키지는 이러한 접근 방식을 지원하는 헬퍼를 제공합니다. 마이크로 프론트엔드 내부에 새로운 export-app.tsx 파일을 추가해 진입점 React 컴포넌트를 브리지로 감쌌습니다:

// src/export-app.tsx
import { createBridgeComponent } from "@module-federation/bridge-react";
import App from "./App";

export default createBridgeComponent({
  rootComponent: App,
});

export const BRIDGE = true;

또한 새로운 진입점 파일을 노출하도록 ModuleFederationPlugin을 업데이트해야 했습니다. 셸보다 높은 버전으로 업그레이드하기 위해 react와 react-dom을 싱글톤으로 공유하는 것을 중단해야 했습니다.

// webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "app",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/export-app",
      },
      shared: ["react", "react-dom"],
    }),
  ],
};

셸 애플리케이션에서는 import-remote를 사용해 remoteEntry 파일을 동적으로 로드합니다. 하위 호환성을 유지하면서 직접 노출된 컴포넌트와 브리지로 감싼 React 컴포넌트를 모두 로드할 수 있도록 이를 조정해야 합니다:

import { createRemoteComponent } from '@module-federation/bridge-react';

const SomeRemote = React.lazy(async () => {
  const remote = await importRemote({
    url: '/bundles/remote-app',
    scope: 'remote-app',
    module: 'App',
  });

  if (remote.BRIDGE) {
    return {
      default: createRemoteComponent({
        loader: () => remote,
        loading: <div>Loading...</div>,
        fallback: (info) =>
          <div>Failed to load {info.error.message}</div>,
      });
    }

    return remote;
  }
});

여기서는 몇 가지가 진행됩니다:

• importRemote를 사용해 remoteEntry.js 파일을 지연 로드합니다. 이를 통해 불필요한 마이크로 프론트엔드를 로드하지 않습니다.
• 내보낸 상수인 BRIDGE를 확인합니다. 이 상수는 마이크로 프론트엔드가 브리지 컴포넌트로 감싸졌는지 알려줍니다. 이를 통해 각 팀이 브리지 사용 여부를 선택할 수 있으며, 아직 마이그레이션하지 않은 경우에도 호환성을 유지할 수 있습니다.
• 브리지 컴포넌트를 default 속성을 가진 객체로 반환해 React.lazy가 받기를 기대하는 동적 로드 모듈의 형태를 모방합니다.

이러한 변경을 통해 셸을 업그레이드하지 않고도 개별 마이크로 프론트엔드를 React 18로 업그레이드할 수 있습니다. 모든 마이크로 프론트엔드가 브리지 방식을 사용하게 되면, 마이크로 프론트엔드를 업그레이드하지 않고도 셸을 업그레이드할 수 있습니다.