# Svelte 컴포넌트

## Content

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

### ActiveReportsJS Svelte NPM 패키지

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

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

ActiveReportsJS Svelte 디자이너 컴포넌트를 응용프로그램의 Svelte 컴포넌트로 가져와서 마크다운에 포함할 수 있습니다. 예:

```javascript
<script lang="ts">
    import {Designer} from "@mescius/activereportsjs-svelte";
</script>

<div id="designer-host">
    <Designer report={{ id: "report.rdlx-json", displayName: "my report" }}></Designer>
</div>
```

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

| 속성 | 유형 | 설명 |
| --- | --- | --- |
| onInit | ()=>[DesignerConfig](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) | 디자이너의 초기화 옵션을 포함하는 [DesignerConfig](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig)를 반환합니다. |
| dataSources | [데이터 소스 템플릿](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#datasourcetemplate) 배열 | [사전 정의된 데이터 소스와 데이터 집합](/activereportsjs/docs/v6.1/)을 설정합니다. |
| reportList | [보고서 리소스 정보 항목](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#reportresourceinfo) 배열 | [하위 보고서의 사전 정의된 보고서 이름](/activereportsjs/docs/v6.1/)을 설정합니다. |
| imageList | [이미지 리소스 정보 항목](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#imageresourceinfo) 배열 | [이미지 보고서 항목에 대한 사전 정의된 이미지](/activereportsjs/docs/v6.1/)를 설정합니다. |
| onCreate | [onCreate 함수](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#oncreate) | [새 보고서 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report)을 디자이너 도구모음에 추가하고 해당 클릭 핸들러를 설정합니다. |
| onOpen | [onOpen 함수](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onopen) | [보고서 열기](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report) 버튼을 디자이너 도구 모음에 추가하고 해당 클릭 핸들러를 설정합니다. |
| onRender | [onRender 함수](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onrender) | [보고서 미리보기 버튼](/activereportsjs/docs/v6.1/)을 보고서 도구 모음에 추가하고 해당 클릭 핸들러를 설정합니다. |
| onSave | [onSave 함수](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onsave) | [보고서 저장 버튼](/activereportsjs/docs/v6.1/)을 보고서 도구 모음에 추가하고 관련된 클릭 핸들러를 설정합니다. |
| onSaveAs | [onSaveAs 함수](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onsaveas) | [다른 이름으로 저장 버튼](/activereportsjs/docs/v6.1/)을 보고서 도구 모음에 추가하고 해당 클릭 핸들러를 설정합니다. |
| onOpenFileMenu | [onOpenFileMenu 함수](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onopenfilemenu) | "파일" 메뉴를 보고서 도구 모음에 추가하고 해당 클릭 핸들러를 설정합니다. |
| report | [report 객체](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#report) | 디자이너에 지정된 보고서를 불러옵니다. |
| documentChanged | (args: [DocumentChangedEventArgs](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#documentchangedeventargs))=>void | 디자이너에 로드된 보고서가 변경될 때 발생하는 이벤트에 대한 핸들러를 설정합니다. |

또한, 디자이너 노드에 변수를 바인딩하여 [Designer 클래스 인스턴스](https://developer.mescius.com/activereportsjs/api/classes/ReportDesigner.Designer)의 `createReport`, `getReport`, `setReport`, 그리고 `processCommand` 메서드에 접근할 수 있습니다. 예:

```javascript
<script lang="ts">
    import {Designer} from "@mescius/activereportsjs-svelte";
    import {onMount} from 'svelte';
    let designerInst: Designer;
    onMount(()=>{
        designerInst.setReport({ id: "report.rdlx-json", displayName: "my report" });
    })
</script>

<div id="designer-host">
    <Designer bind:this={designerInst}></Designer>
</div>
```