MFE 간 공유 상태와 라우팅

상태 공유의 과제

브라우저 사용자 지정 이벤트

// Remote emits:
window.dispatchEvent(new CustomEvent('cart:add', { detail: { productId: '123' } }));

// Host listens:
useEffect(() => {
  const handler = (e: CustomEvent) => addToCart(e.detail.productId);
  window.addEventListener('cart:add', handler);
  return () => window.removeEventListener('cart:add', handler);
}, []);

공유 이벤트 버스 라이브러리

// Singleton event bus
const bus = {
  listeners: new Map<string, Function[]>(),
  emit(event: string, data: unknown) {
    this.listeners.get(event)?.forEach(fn => fn(data));
  },
  on(event: string, fn: Function) {
    if (!this.listeners.has(event)) this.listeners.set(event, []);
    this.listeners.get(event)!.push(fn);
    return () => this.off(event, fn);
  },
  off(event: string, fn: Function) {
    const list = this.listeners.get(event) || [];
    this.listeners.set(event, list.filter(f => f !== fn));
  },
};
export default bus;

공유 상태로 사용하는 웹 주소

// Remote reads from URL:
const params = new URLSearchParams(window.location.search);
const productId = params.get('product');

// Remote navigates via history API (or exposes a navigate callback from host):
window.history.pushState({}, '', '/products?product=456');

라우팅 아키텍처

// Host passes routing control to remote:
<RemoteProductsApp
  basepath="/products"
  navigate={(path) => router.push(path)}
/>

// Remote uses basepath for its internal router:
<BrowserRouter basename={basepath}>
  <Routes>...</Routes>
</BrowserRouter>

Module Federation에서 React Router 사용

// Remote App component:
export function ProductsApp({ basepath = '/products' }) {
  return (
    <BrowserRouter basename={basepath}>
      <Routes>
        <Route path="/" element={<ProductList />} />
        <Route path="/:id" element={<ProductDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

공유 인증 상태

// Host provides auth via props:
<RemoteCheckout
  userId={currentUser.id}
  token={accessToken}
  onLogout={handleLogout}
/>

공유 저장소로 사용하는 Zustand

// shared/store.ts (exposed as singleton)
import { create } from 'zustand';
export const useCartStore = create(set => ({
  items: [],
  addItem: (item) => set(state => ({ items: [...state.items, item] })),
}));

// Configured as singleton in MF shared config

MFE 간 통신의 잘못된 설계 패턴

MFE 간 상호 작용 테스트

빠른 확인

복습