# 리소스 로케이터 사용

## Content



보고서가 [하위 보고서](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Supplemental-Report-Items/Subreport)를 포함하거나 [드릴스루 상호 작용](/activereportsjs/docs/v2.2/ReportAuthorGuide/Interactivity#jump-to-report)을 허용하는 경우 보고서에 다른 보고서에 대한 참조를 포함할 수 있습니다. 
[모듈](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/LoadingReports/LoadingFromModules) 또는 [JSON 데이터](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/LoadingReports/LoadingFromJSON)를 사용하여 보고서 컴포넌트에 보고서를 로드하는 경우 하위 보고서와 드릴스루 보고서에 대한 참조를 자동으로 확인할 수 없으므로 보고서 정의 개체를 ID로 반환하는 코드를 제공해야 합니다.
또한 런타임에 확인해야 하는 [테마](/activereportsjs/docs/v2.2/ReportAuthorGuide/Themes)를 보고서에 사용할 수 있습니다.
보고서 뷰어 컴포넌트의 [open 메서드](@api/classes/reportviewer.viewer.html#open)는 ```리소스 로케이터``` 구현을 포함할 수 있는 개체인 두 번째 선택적 인수를 수락합니다. 예를 들면 다음과 같습니다.

```js

// eslint-disable import/no-webpack-loader-syntax
import mainReport from '!json-loader!../reports/MainReport.rdlx-json';
import subReport from '!json-loader!../reports/Subreport.rdlx-json';
import drillthroughReport from '!json-loader!../reports/DrillthroughReport.rdlx-json';

this.reportViewer.open("MainReport", {
  ResourceLocator: {
    getResource: (resourceId: string) => {
      switch (resourceId) {
        case "MainReport": return mainReport;
        case "Subreport": return subReport;
        case "DrillThroughReport": return drillthroughReport;
        case "Theme": return fetch("assets/themes/light-theme.rdlx-json-theme").then(response => response.json());
      }
    },
  },
});
```

프로그래밍 방식으로 보고서 정의를 로드하는 경우 [PageReport](@api/classes/core.pagereport.html) 인스턴스의 [load 메서드](@api/classes/core.pagereport.html#load)에 리소스 로케이터를 전달할 수 있습니다. 예를 들면 다음과 같습니다.

```js
const report = new GC.ActiveReports.Core.PageReport();
await report.load("MainReport", {
    resourceLocator: {
        getResource: (resourceId) => {
          return fetch("assets/" + resourceId).then(response => response.json());
        },
      },
);
```

```getResource``` 함수는 보고서 정의나 동일한 정의로 확인되는 테마 개체 또는 ```Promise``` 개체를 반환할 수 있습니다.

Angular, React, Vue, Pure JS 응용 프로그램의 코드 샘플은 [리소스 로케이터 데모](/activereportsjs/demos/features/viewer-resource-locator/purejs)를 참조하십시오.