# React 응용 프로그램에서 ActiveReportsJS 보고서 디자이너 컴포넌트 사용

## Content



### React 응용 프로그램 만들기

새 React 응용 프로그램을 가장 쉽게 만드는 방법은 [Create React App](https://github.com/facebook/create-react-app#creating-an-app) 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 포함된 React 응용 프로그램을 만듭니다. 자세한 내용은 [React 앱 만들기](https://create-react-app.dev/) 사이트에서 [시작하기](https://create-react-app.dev/docs/getting-started)를 참조하십시오.
 
```bash
npm init react-app arjs-react-designer-app
```

yarn을 사용하는 경우:

```bash
yarn create react-app arjs-react-designer-app
```


React 응용 프로그램을 만드는 다른 방법은 [공식 문서](https://reactjs.org/docs/create-a-new-react-app.html)를 참조하십시오.

### ActivereportsJS npm 패키지 설치

[@grapecity/activereports-react](https://www.npmjs.com/package/@grapecity/activereports-react) npm 패키지를 통해 React 보고서 디자이너 컴포넌트를 배포합니다. 기본 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) 패키지는 핵심 기능을 제공합니다. 이러한 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.

```bash
npm install @grapecity/activereports-react @grapecity/activereports
```

yarn을 사용하는 경우:

```bash
yarn add @grapecity/activereports-react @grapecity/activereports
```


### ActiveReportsJS 스타일 가져오기

```src\App.css``` 파일을 열고 내용을 다음 코드로 바꿉니다. 이 코드는 기본 [보고서 뷰어 컴포넌트 스타일](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Themes#built-in-themes)을 가져오며, [React 보고서 디자이너 컴포넌트](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/React-Component)를 호스트할 요소의 스타일을 정의합니다.

```css
@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-designer.css";

#designer-host {
  width: 100%;
  height: 100vh;
}
```

### ActiveReportsJS 보고서를 응용 프로그램에 추가

ActiveReportsJS는 보고서 템플릿 파일에 [JSON 형식](https://www.json.org/json-en.html) 및 ```rdlx-json``` 확장자를 사용합니다. ```public``` 폴더에서 ```report.rdlx-json```이라는 새 파일을 만들고 다음 JSON 콘텐츠를 해당 파일에 삽입합니다.

```json
{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

### React 보고서 디자이너 컴포넌트를 응용 프로그램에 추가

`src\App.js`의 기본 코드를 다음 코드로 바꿉니다. [React 보고서 디자이너 컴포넌트](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/React-Component)를 사용합니다. 디자이너 컴포넌트의 ```report``` 속성은 이전 단계에서 만든 ```report.rdlx-json```을 가리킵니다. 

```javascript
import React from "react";
import "./App.css";
import { Designer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="designer-host">
      <Designer report={{ id: "report.rdlx-json", displayName: "my report" }} />
    </div>
  );
}

export default App;

```


### 응용 프로그램 실행 및 테스트

`npm start` 또는 `yarn start` 명령을 실행하면 JavaScript heap의 메모리가 부족해지는 치명적 오류가 발생할 수 있습니다. 그런 경우에는 `package.json` 파일을 열고 `start` 스크립트를 다음 스크립트로 바꿉니다.

`react-scripts --max_old_space_size=8192 start`

`npm start` 또는 `yarn start` 명령을 다시 실행합니다. 아래와 같이 오류가 발생하고 명령이 실패하면 ```node_modules``` 폴더를 삭제하고 ```npm install``` 또는 ```yarn```을 실행하여 필요한 패키지를 모두 다시 설치합니다. 그런 다음 `npm start` 또는 `yarn start`를 다시 실행합니다.

```bash
> react-scripts start

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'react'
```

ActiveReportsJS 디자이너 컴포넌트가 응용 프로그램의 시작 페이지에 나타나고 보고서 디자인을 표시합니다. 보고서 항목을 추가하고, 해당 속성을 설정하며, 데이터 소스를 생성하는 등의 방법으로 기본 기능을 테스트합니다. 보고서 디자이너 컴포넌트를 사용하는 방법에 대한 자세한 내용은 [개발자 가이드](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) 및 [온라인 데모](/activereportsjs/demos/features/designer-integration/react)를 참조하십시오.