이전에 브리지 컴포넌트를 활용해 여러 마이크로 프론트엔드에서 React를 점진적으로 업그레이드한 방법에 대해 소개한 적이 있습니다. 처음에는 @module-federation/bridge-react 패키지를 사용하는 것을 검토했지만, 리렌더링 문제와 필요 이상으로 많은 기능을 담고 있다는 점 때문에 어려움을 겪었습니다.

이 문제를 해결하기 위해 직접 패키지를 만들었고, 현재 프로덕션에서 성공적으로 사용하며 28개의 마이크로 프론트엔드가 각각 독립적으로 React를 업그레이드할 수 있도록 하고 있습니다. 이제 이 패키지를 npm에 @mintel/mfe-react-bridge로 오픈소스 공개했습니다.

서로 다른 React 버전을 사용하는 마이크로 프론트엔드(또는 전혀 다른 UI 프레임워크)를 렌더링하기 위한 React 컴포넌트 인터페이스를 제공하는 몇 가지 헬퍼 함수를 담은 작은 라이브러리입니다. TypeScript 타입을 제공하고, React 17과 18 이상을 지원하며, 충분히 테스트되었습니다.

마이크로 프론트엔드와 React 버전 관리로 비슷한 어려움을 겪는 분들께 도움이 되길 바랍니다. 이슈가 있다면 GitHub에 자유롭게 남겨주세요.