이전 글에서 브리지 컴포넌트를 활용해 여러 마이크로프론트엔드에 걸쳐 React를 점진적으로 업그레이드한 방법을 소개한 적이 있습니다. 처음에는 @module-federation/bridge-react 패키지 사용을 검토했지만, 리렌더링 관련 이슈가 있었고 저희에게 필요한 것보다 많은 기능을 담고 있었습니다.

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

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

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