Bahmniapps에서 React 컴포넌트 빌드 가이드

이 위키는 AngularJS의 지원 수명 주기가 종료된 상황을 고려하여 openmrs-module-bahmniapps 내에서 React 컴포넌트를 만드는 방법을 종합적으로 안내합니다. 또한 clinical 모듈에서 이를 구현한 방법을 살펴보고, 이러한 기법을 Bahmni의 다른 모듈로 확장할 가능성도 알아봅니다.관련 문서: end of its support lifecycle

Bahmni 생태계에서 렌더링할 새로운 React 컴포넌트를 만드는 지정 위치입니다. bahmniapps의 micro-frontends 폴더에는 next-ui 하위 폴더가 있으며, 이 폴더에는 현재 Bahmni clinical 대시보드에서 사용하는 새 React 컴포넌트가 들어 있습니다.

다음은 next-ui 폴더 구조를 간단히 살펴본 모습입니다.

일관된 UI 요소를 유지하기 위해 특정 React 컴포넌트를 Bahmni의 여러 모듈에서 사용하려면 해당 컴포넌트를 bahmni-carbon-ui 저장소에 포함하는 것이 좋습니다.

사용자 정의 컴포넌트를 빌드하는 방법을 자세히 이해하기 위해 FormsDisplayControl을 예로 살펴보겠습니다.

• 모든 스타일시트, 테스트 및 컴포넌트 자체는 next-ui 아래의 Containers 폴더에 있습니다.

• Angular 코드베이스에 'FormsDisplayControl'을 노출하려면 index.js 파일에 지정된 내용을 추가해야 합니다.

  import { React2AngularBridgeBuilder } from "../utils/bridge-builder";
  import { FormDisplayControl } from "./Containers/formDisplayControl/FormDisplayControl";
  
  const MODULE_NAME = "bahmni.mfe.nextUi";
  
  angular.module(MODULE_NAME, []);
  
  const builder = new React2AngularBridgeBuilder({
    moduleName: MODULE_NAME,
    componentPrefix: "mfeNextUi",
  });
  
  builder.createComponentWithTranslationForwarding(
    "FormDisplayControl",
    FormDisplayControl
  );

• 새로 만든 React 컴포넌트를 렌더링하도록 Clinical 모듈의 어느 HTML 파일에든 FormDisplayControl을 추가할 수 있습니다. HTML 태그는 다음과 같습니다.]]>관련 문서: HTML files

  <mfe-next-ui-form-display-control ng-if="::(section.translationKey === 'DASHBOARD_TITLE_FORMS_2_DISPLAY_CONTROL_KEY')" host-data="formData"></mfe-next-ui-form-display-control>

React 컴포넌트에서 사용할 데이터는 해당 Angular 컨트롤러 또는 지시문에서 구성한 'host-data' 속성을 통해 전달할 수 있습니다. 마찬가지로 Angular로 보내려는 이벤트나 데이터는 관련 Angular 컨트롤러 또는 지시문에 구현된 콜백 함수 모음인 'host-api'를 통해 전달할 수 있습니다.

이 예에서 React2AngularBridgeBuilder 컴포넌트는 React 컴포넌트와 Angular 사이에 필요한 연결을 설정하는 사용자 정의 모듈입니다. 내부적으로 데이터를 원활하게 전달하고 콜백 함수를 실행합니다.

이 모듈의 작동 방식에 대한 자세한 설명과 문서는 관련 페이지를 참고하십시오.관련 문서: this page

새로 개발한 컴포넌트를 Bahmni에 통합하기 위해 next-UI를 bahmni.mfe.nextUi라는 Angular 모듈로 만들었습니다. 이 컴포넌트를 사용하려면 새 React 컴포넌트를 렌더링할 Bahmni 모듈의 의존성에 이 모듈을 포함해야 합니다.

아래에서는 새 React 컴포넌트를 렌더링하기 위해 next-UI 모듈을 Clinical 모듈에 추가하는 과정을 설명합니다.

이와 함께 축소된 JS 및 CSS 파일을 각 모듈의 index.html에 수동으로 추가해야 합니다. 다음은 Clinical 모듈의 index.html에 축소 파일을 추가한 방법입니다.

Angular 모듈에 next-UI 컴포넌트를 처음 추가할 때는 React 및 React DOM 의존성 파일이 해당 모듈의 index.html 파일에 연결되어 있는지 확인하십시오.

새로 만든 React 컴포넌트(next-UI 및 기타 MFE)가 사용하는 모든 번역은 public/i18n 폴더에 있으며 micro-frontends 빌드에 함께 번들됩니다.

• 새 컴포넌트에 클래스 이름을 지정할 때는 고유한 이름을 사용하고, 가급적 'next-ui-<classname>'과 같은 접두사를 붙이기를 강력히 권장합니다. 일반적인 클래스 이름 때문에 새 스타일과 Bahmni의 기존 스타일이 섞이는 사례가 있었으므로, 의도하지 않은 스타일 충돌을 방지하기 위해 중요합니다.