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

아티클
01/18/2024

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 항목을 포함하면 포함 구성이 변경됩니다.
eventHandlers - 이벤트 이름 및 해당 처리기의 맵 개체입니다. 자세한 내용은 이벤트를 처리하는 방법을 참조하세요.
cssClassName - 포함된 항목에 CSS를 사용하여 포함된 iframe의 스타일을 제어할 수 있는 CSS 클래스 이름을 제공합니다.
getEmbedComponent - Power BI 클라이언트 라이브러리에서 허용하는 모든 API를 사용할 수 있도록 포함된 instance 가져오는 데 도움이 되는 콜백입니다. 예를 들어 보고서를 포함할 때 Report 클래스의 instance 가져옵니다.

구성 요소 부트스트랩

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 보고서 작성 라이브러리를 사용하는 방법을 보여 줍니다.

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

Power BI React 데모를 보여 주는 애니메이션 GIF입니다.