# ActiveReportsJS React 보고서 디자이너

## Content

이 페이지에서는 ActiveReportsJS React 보고서 디자이너에 대해 자세히 살펴봅니다. 디자이너 컴포넌트를 React 응용 프로그램으로 통합하는 간단한 가이드는 [시작하기](/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-React) 자습서를 확인할 수 있습니다.

### ActiveReportsJS React NPM 패키지

[@mescius/activereportsjs-react](https://www.npmjs.com/package/@mescius/activereportsjs-react) npm 패키지를 통해 ActiveReportsJS React 보고서 디자이너 컴포넌트가 포함된 라이브러리를 배포합니다. 기본 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) 패키지는 핵심 기능을 제공합니다.

### ActiveReportsJS React 디자이너 컴포넌트

ActiveReportsJS React 디자이너 컴포넌트는 JSX(TSX) 파일로 내보내 컴포넌트의 렌더링 트리에 포함할 수 있습니다. 예를 들어 다음과 같습니다.

```javascript
import { Designer } from "@mescius/activereportsjs-react";
function App() {
  return (
    <div>
      <Designer />
    </div>
  );
}
```

디자이너 컴포넌트는 다음 속성을 허용합니다.

| 속성 | 유형 | 설명 |
| --- | --- | --- |
| hotkeysEnabled | boolean | 저장 및 열기 핫키가 사용하도록 설정되어 있는지 여부를 나타냅니다. |
| language | string | 디자이너 컴포넌트 인터페이스의 언어를 설정합니다. 자세한 내용은 [지역화](localization) 페이지를 확인하십시오. |
| fontSet | "default" | "registered" |
| dataSources | [데이터 소스 템플릿](@api/modules/reportdesigner.html#datasourcetemplate)의 배열 | [미리 정의된 데이터 소스 및 데이터 집합](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Add-Predefined-Datasources-Datasets)을 설정합니다. |
| reportList | [보고서 리소스 정보 항목](@api/modules/reportdesigner.html#reportresourceinfo)의 배열 | [하위 보고서의 미리 정의된 보고서 이름](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources)을 설정합니다. |
| imageList | [이미지 리소스 정보 항목](@api/modules/reportdesigner.html#imageresourceinfo)의 배열 | [이미지 보고서 항목의 미리 정의된 이미지](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources)를 설정합니다. |
| onCreate | [onCreate 함수](@api/interfaces/reportdesigner.actionhandlers.html#oncreate) | 디자이너 도구 모음에 [새 보고서 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-new-report-button)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onOpen | [onOpen 함수](@api/interfaces/reportdesigner.actionhandlers.html#onopen) | 디자이너 도구 모음에 [보고서 열기 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-open-report-button)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onRender | [onRender 함수](@api/interfaces/reportdesigner.actionhandlers.html#onrender) | 디자이너 도구 모음에 [보고서 미리 보기 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Preview-Reports)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onSave | [onSave 함수](@api/interfaces/reportdesigner.actionhandlers.html#onsave) | 디자이너 도구 모음에 [보고서 저장 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onSaveAs | [onSaveAs 함수](@api/interfaces/reportdesigner.actionhandlers.html#onsaveas) | 디자이너 도구 모음에 [다른 이름으로 저장 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onOpenFileMenu | [onOpenFileMenu 함수](@api/interfaces/reportdesigner.actionhandlers.html#onopenfilemenu) | 디자이너 도구 모음에 "파일" 메뉴를 추가하고 해당 클릭 처리기를 설정합니다. |
| report | [보고서 개체](@api/modules/reportdesigner.html#report) | 디자이너에서 지정된 보고서를 로드합니다. |

또한 디자이너 컴포넌트에 대한 `ref`를 생성하여 부모 컴포넌트에서 [디자이너 클래스 인스턴스](@api/classes/reportdesigner.designer.html)의 `getReport`, `setReport` 및 `processCommand` 메서드를 사용할 수 있습니다. 예를 들어 다음과 같습니다.

```javascript
import { Designer } from "@mescius/activereportsjs-react";
function App() {
  const designerRef = React.createRef();
  const btnClick = function () {
    designerRef.current.setReport({id: "report.rdlx-json"});
  };
  return (
    <div id="designer-host">
      <button type="button" onClick={btnClick}>
        Open Report
      </button>
      <Designer ref={designerRef} />
    </div>
  );
}
```