React 애플리케이션에 Power BI 항목 포함

Power BI 임베디드 분석 애플리케이션을 만들 때 React는 보고서 작성을 포함하여 모든 클라이언트 쪽 API를 사용하는 동시에 부트스트랩 통합을 통해 성능을 최적화하는 데 도움이 될 수 있습니다. 또한 애플리케이션에 Power BI 포함 수명 주기 관리가 간소화됩니다. Power BI React 구성 요소는 JavaScript 및 TypeScript를 모두 지원하며 React 웹 애플리케이션에 분석을 포함하는 데 도움이 됩니다.

React 라이브러리를 사용하면 다음 Power BI 항목을 포함할 수 있습니다.

• 보고서
• 대시보드
• 대시보드 타일
• 보고서 시각적 개체
• Q&A 문의

React 웹앱에 Power BI 항목을 포함하는 방법

이 섹션에서는 React를 앱으로 가져와서 이를 사용하여 Power BI 보고서를 포함하는 방법을 설명합니다.

자세한 사용 정보는 Power BI React 추가 정보 파일을 참조하세요.

React 라이브러리 가져오기

Power BI React 구성 요소는 NPM찾을 수 있습니다. 또한 GitHub오픈 소스입니다.

React를 웹앱으로 가져오려면 나열된 가져오기를 추가합니다.

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

React를 사용하여 보고서 포함

이 예제에서는 React를 사용하여 Power BI 보고서를 포함하는 방법을 보여줍니다. 예제 아래에서 코드 샘플의 각 구성 요소에 대한 설명을 찾을 수 있습니다.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
        }
    }
}

eventHandlers = {
    new Map([
        ['loaded', function () {
            console.log('Report loaded');
        }],
        ['rendered', function () {
            console.log('Report rendered');
        }],
        ['error', function (event) {
            console.log(event.detail);
        }]
    ])
}

cssClassName = {
    "report-style-class"
}

getEmbeddedComponent = {
    (embeddedReport) => {
        window.report = embeddedReport;
    }
}

다음 목록에는 코드 조각 예제의 각 구성 요소에 대한 설명 또는 추가 정보가 포함되어 있습니다.

• 포함 구성 - 포함할 콘텐츠를 정의하고 콘텐츠의 설정을 지정합니다. 다음 Power BI 항목을 포함하면 포함 구성이 변경됩니다.

  • 보고서
  • 보고서 시각적 개체
  • 페이지를 매긴 보고서
  • 독립 실행형 Q&시각적 개체
  • 대시보드
  • 대시보드 타일

• eventHandlers - 이벤트 이름 및 해당 처리기에 대한 맵 개체입니다. 자세한 내용은 이벤트 처리하는 방법을 참조하세요.

• cssClassName - 포함된 항목에 CSS를 사용하여 포함된 iframe의 스타일을 제어할 수 있는 CSS 클래스 이름을 제공합니다.

• getEmbedComponent - Power BI 클라이언트 라이브러리에서 허용하는 모든 API를 사용할 수 있도록 포함된 인스턴스를 가져오는 데 도움이 되는 콜백입니다. 예를 들어 보고서를 포함할 때 Report 클래스의 인스턴스를 가져옵니다.

구성 요소 부트스트랩

powerbi.bootstrap 개발자가 Power BI 항목을 더 빠르게 포함하고 성능을 향상하는 데 도움이 되는 방법입니다. 자세한 내용은 성능 향상을 위해 부트스트랩 사용을 참조하세요.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as an empty string, null, or undefined.
        tokenType: models.TokenType.Embed
    }
}

React 데모

React 리포지토리에는 보고서를 부트스트래핑하고 포함된 보고서를 포함하고 업데이트하는 전체 흐름을 보여 주는 데모가 포함되어 있습니다. 또한 시각적 개체 삭제 단추를 클릭할 때 보고서에서 시각적 개체를 삭제하여 powerbi 보고서 작성 라이브러리를 사용하는 방법을 보여 줍니다.

자세한 내용은 추가 정보 파일의 데모 섹션을 참조하세요.

데모 실행

데모는 리포지토리의 하위 폴더입니다. localhost에서 데모를 실행하려면 다음 단계를 수행합니다.

1. 다음 명령을 실행합니다.

   npm run install:demo
   npm run demo
   

2. 브라우저에서 보려면 http:/localhost:8080/리디렉션합니다.

관련 콘텐츠

• 보고서 포함하는
• 보고서 시각적 개체 포함
• 성능 향상을 위해 부트스트랩 사용
• 보고서 설정 구성
• 보고서 만들기, 편집 및 저장