캔버스 구성 요소 개요

참고

• 이 섹션에서는 로우 코드 UI 확장 기능을 포함하는 캔버스 구성 요소에 대해 설명합니다. 전문 개발자는 Power Apps component framework를 사용하여 코드 구성 요소를 빌드할 수도 있습니다.
• 캔버스 구성 요소는 사용자 지정 페이지 및 구성 요소 라이브러리를 사용하는 모델 기반 앱에서도 사용할 수 있습니다. 추가 정보: 모델 기반 앱의 사용자 지정 페이지에 캔버스 구성 요소 추가

구성 요소는 캔버스 앱의 재사용 가능한 빌딩 블록이므로 애플리케이션 제작자는 구성 요소 라이브러리를 사용하여 애플리케이션 내에서 또는 애플리케이션 간에 사용할 사용자 지정 컨트롤을 만들 수 있습니다. 구성 요소는 사용자 지정 속성과 같은 고급 기능을 사용하고 복잡한 기능을 활성화할 수 있습니다. 이 문서에서는 구성 요소 개념과 몇 가지 예를 소개합니다.

구성 요소는 유사한 제어 패턴을 가진 더 큰 앱을 빌드하는 데 유용합니다. 앱 내부의 구성 요소 정의를 업데이트하면 앱의 모든 인스턴스가 변경 사항을 반영합니다. 또한 구성 요소는 제어를 복사/붙여넣기하고 성능을 향상시킬 필요가 없어서 중복 작업을 줄입니다. 구성 요소 라이브러리를 사용하면 구성 요소는 공동 개발을 지원하고 조직의 모양과 느낌을 표준화하는 데 도움을 줍니다.

캔버스 앱에서 구성 요소를 사용하는 방법을 배우려면 이 비디오를 시청하십시오.

캔버스 앱의 구성 요소

이 문서에 설명 된대로 앱 내에서 구성 요소를 만들거나 구성 요소 라이브러리 안에서 새로운 구성 요소를 만들 수 있습니다. 여러 앱 화면에서 구성 요소를 사용하려면 요구 사항에 구성 요소 라이브러리를 사용해야 합니다. 기존 구성 요소를 기존 또는 새 구성 요소 라이브러리에 복사할 수도 있습니다.

앱 내에서 구성 요소를 만들려면 트리 뷰로 이동하여 구성 요소 탭을 선택한 다음 새로운 구성 요소를 선택합니다.

새 구성 요소를 선택하면 빈 캔버스를 엽니다. 캔버스에서 구성 요소 정의의 일부로 컨트롤을 추가할 수 있습니다. 캔버스에서 구성 요소를 편집하면 다른 앱 화면에서 동일한 구성 요소의 인스턴스가 업데이트됩니다. 이미 생성된 구성 요소를 재사용하는 앱은 구성 요소 변경 사항을 게시한 후 구성 요소 업데이트를 받을 수 있습니다.

화면을 선택한 후 왼쪽 창의 기존 구성 요소 목록에서 구성 요소를 선택할 수 있습니다. 구성 요소를 선택하면 컨트롤을 삽입하는 것처럼 해당 구성 요소의 인스턴스가 화면에 삽입됩니다.

앱 내에서 사용 가능한 구성 요소는 트리 뷰 내의 구성 요소 목록에서 사용자 지정 범주 아래에 나열되어 있습니다. 구성 요소 라이브러리에서 가져온 구성 요소는 라이브러리 구성 요소 범주 아래 나열되어 있습니다.

참고

이 문서에서 논의한 구성 요소는 제작자가 모델 기반 및 캔버스 앱용 코드 구성 요소를 만들 수 있는 Power Apps component framework와는 다릅니다. 자세한 내용은 Power Apps component framework 개요에서 확인할 수 있습니다.

사용자 지정 속성

하나 이상의 사용자 지정 속성을 만들면 구성 요소가 입력 값을 수신하고 데이터를 방출할 수 있습니다. 이 시나리오는 고급이며 수식 및 바인딩 계약을 이해해야 합니다.

참고

향상된 구성 요소 속성에 대한 실험적 기능은 함수 및 동작 기능을 포함하여 속성에 대한 더 많은 옵션을 제공합니다. 자세한 내용은 캔버스 구성 요소 속성(실험적)을 참조하세요

입력 속성은 구성 요소가 구성 요소에서 사용할 데이터를 수신하는 방법입니다. 구성 요소의 인스턴스가 선택되면 입력 속성이 오른쪽 창의 속성 텝에 나타납니다. 다른 컨트롤에서 표준 속성을 구성하는 것처럼 식 또는 수식을 사용하여 입력 속성을 구성할 수 있습니다. 다른 컨트롤에는 텍스트 입력 컨트롤의 Default 속성과 같은 입력 속성이 있습니다.

출력 속성은 데이터 또는 구성 요소 상태를 방출하는 데 사용됩니다. 예를 들어 갤러리 속성의 Selected 속성은 출력 속성입니다. 출력 속성을 만들 때 다른 컨트롤이 구성 요소 상태를 참조할 수 있는지를 결정할 수 있습니다.

다음 연습에서는 이러한 개념에 대해 자세히 설명합니다.

구성 요소 예제 생성

이 예에서는 다음 그래픽과 유사한 메뉴 구성 요소를 만듭니다. 또한 나중에 여러 화면, 앱 또는 둘 다에서 사용하도록 텍스트를 변경할 수 있습니다.

참고

재사용할 구성 요소를 만들 때 구성 요소 라이브러리를 사용하는 것이 좋습니다. 앱 내에서 구성 요소를 업데이트하면 앱 내에서만 구성 요소 업데이트를 사용할 수 있습니다. 구성 요소 라이브러리를 사용할 때 라이브러리 안에 있는 구성 요소가 업데이트되고 게시되면 구성 요소를 업데이트하라는 메시지가 표시됩니다.

새 구성 요소 만들기

1. 빈 캔버스 앱을 만듭니다.

2. 트리 보기에서 구성 요소를 선택한 다음 새 구성 요소를 선택하여 새 구성 요소를 만듭니다.

   

3. 왼쪽 창에서 새 구성 요소를 선택하고 줄임표(...)를 선택한 다음 이름 바꾸기를 선택합니다. MenuComponent로 이름을 입력하거나 붙여넣습니다.

4. 오른쪽 창에서 구성 요소의 너비를 150 그리고 높이를 250으로 선택한 다음 새로운 사용자 지정 속성을 선택합니다. 높이와 너비를 다른 값으로 적절히 설정할 수도 있습니다.

   

5. 표시 이름, 속성 이름, 설명 상자에 항목으로 텍스트를 입력하거나 붙여넣습니다.

   

   수식을 작성할 때 이 이름으로 구성 요소를 참조하므로 속성 이름에 공백을 포함하지 마십시오. 예를 들어 ComponentName.PropertyName.

   구성 요소를 선택하면 표시 이름이 오른쪽 창의 속성 탭에 나타납니다. 설명적인 표시 이름은 자신과 다른 제작자가 이 속성의 목적을 이해하도록 도와줍니다. 설명은 속성 탭에서 이 속성의 표시 이름 위로 마우스를 가져가면 툴팁에 나타납니다.

6. 데이터 형식목록에서 테이블을 선택한 다음 생성을 선택합니다.

   

   Items 속성은 지정한 데이터 형식에 따라 기본값으로 설정됩니다. 필요에 맞는 값으로 설정할 수 있습니다. 테이블 또는 레코드의 데이터 유형을 지정한 경우 구성 요소에 입력하려고 하는 데이터 스키마와 일치하도록 Items 속성의 값을 변경해야 할 수 있습니다. 이 경우 문자열 목록으로 변경합니다.

   오른쪽 창의 속성 탭에서 속성 이름을 선택하면 수식 입력줄에서 속성 값을 설정할 수 있습니다.

   

   다음 그래픽에서 볼 수 있듯이 오른쪽 창의 고급 탭에 있는 속성 값도 편집할 수 있습니다.

7. Items 속성을 다음 수식으로 설정합니다.

   Table({Item:"SampleText"})
   

   

8. 구성 요소에서 빈 수직의 갤러리 컨트롤을 삽입하고 속성 창의 레이아웃을 제목으로 선택합니다.

9. 속성 목록에 Items이 표시되는지 확인합니다(기본값). 그런 다음 해당 속성 값을 다음 식으로 설정합니다.

   MenuComponent.Items
   

   이런 식으로 갤러리 컨트롤의 Items 속성은 구성 요소의 Items 입력 속성에 종속되며 읽습니다.

10. 선택 사항 - 갤러리 컨트롤의 BorderThickness 속성을 1 그리고 TemplateSize 속성을 50으로 설정합니다. 테두리 두께 및 템플릿 크기 값을 다른 값으로 적절히 업데이트할 수 있습니다.

화면에 구성 요소 추가

다음으로 구성 요소를 화면에 추가하고 구성 요소가 표시할 문자열 테이블을 지정합니다.

1. 왼쪽 창에서 화면 목록을 선택한 다음 기본 화면을 선택합니다.

   

2. 삽입 탭에서 구성 요소 메뉴를 연 다음, MenuComponent를 선택합니다.

   

   새로운 구성 요소는 기본값으로 MenuComponent_1로 이름이 지정되어 있습니다.

3. MenuComponent_1의 Items 속성을 이 수식으로 설정합니다.

   Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})
   

   이 인스턴스는 이 그래픽과 비슷하지만 각 인스턴스의 텍스트 및 기타 속성을 사용자 지정할 수 있습니다.

   

출력 속성 생성 및 사용

지금까지 구성 요소를 만들어 앱에 추가했습니다. 다음으로, 메뉴에서 사용자가 선택한 항목을 반영하는 출력 속성을 만듭니다.

1. 구성 요소 목록을 열고 MenuComponent를 선택합니다.

2. 오른쪽 창에서 속성 탭을 선택한 다음 새로운 사용자 지정 속성을 선택합니다.

3. 표시 이름, 속성 이름, 설명 상자에 선택됨으로 텍스트를 입력하거나 붙여넣습니다.

4. 속성 유형 아래, 출력을 선택한 다음 생성을 선택합니다.

   

5. 고급 탭에서 Selected 속성의 값을 다음 식으로 설정합니다(필요에 따라 갤러리 이름에서 숫자를 조정).

   Gallery1.Selected.Item
   

   

6. 앱의 기본 화면에서 레이블을 추가하고 Text 속성을 이 식으로 설정합니다(필요에 따라 구성 요소 이름의 숫자를 조정).

   MenuComponent_1.Selected
   

   MenuComponent_1은 구성 요소 정의의 이름이 아니라 인스턴스의 기본 이름입니다. 모든 인스턴스의 이름을 바꿀 수 있습니다.

7. Alt 키를 누른 상태에서 메뉴에서 각 항목을 선택합니다.

   레이블 컨트롤은 가장 최근에 선택한 메뉴 항목을 반영합니다.

Scope

입력 및 출력 속성은 구성 요소와 해당 호스트 앱 간의 인터페이스를 명확하게 정의합니다. 기본적으로 구성 요소는 캡슐화되어 앱 간에 구성 요소를 더 쉽게 재사용할 수 있으므로 구성 요소 안팎으로 정보를 전달하기 위해 속성을 사용해야 합니다. 범위 제한은 구성 요소의 데이터 계약을 간단하고 응집력 있게 유지하며,—특히 구성 요소 라이브러리가 있는 앱에서 구성 요소 정의 업데이트를 가능하게 합니다.

그러나 구성 요소가 데이터 원본 또는 변수를 호스트와 공유하려는 경우가 있습니다. 특히 구성 요소가 하나의 특정 앱에서만 사용하도록 의도된 경우. 이러한 경우 구성 요소의 속성 창에서 액세스 앱 범위 스위치를 켜서 앱 수준 정보에 직접 액세스할 수 있습니다.

액세스 앱 범위가 켜져 있으면 구성 요소 내에서 다음 항목에 액세스할 수 있습니다.

• 전역 변수
• 컬렉션
• TextInput 컨트롤과 같은 화면의 컨트롤 및 구성 요소
• Dataverse 테이블과 같은 테이블 형식 데이터 원본

이 설정이 꺼져 있으면 구성 요소에서 위의 어떤 것도 사용할 수 없습니다. Set 및 Collect 함수는 계속 사용할 수 있지만 결과 변수와 컬렉션은 구성 요소 인스턴스로 범위가 지정되며 앱과 공유되지 않습니다.

Azure Blob Storage 또는 사용자 지정 커넥터와 같은 테이블 형식이 아닌 데이터 원본은 이 설정이 켜져 있는지 여부에 관계없이 사용할 수 있습니다. 이러한 데이터 원본은 앱 리소스가 아닌 환경 리소스를 참조하는 것과 비슷합니다. 구성 요소를 구성 요소 라이브러리에서 앱으로 가져올 때 환경의 이러한 데이터 원본도 가져옵니다.

참조할 단일 앱 범위가 없으므로 구성 요소 라이브러리의 구성 요소는 앱 범위에 액세스할 수 없습니다. 따라서 이 설정은 이 컨텍스트에서 사용할 수 없으며 사실상 꺼져 있습니다. 앱으로 가져온 후 구성 요소 제작자가 사용자 지정을 허용한 경우 스위치를 사용 설정하고 구성 요소를 수정하여 앱 범위를 사용할 수 있습니다.

참고

• 구성 요소 라이브러리의 화면에 구성 요소 인스턴스를 삽입하고 테스트 목적으로 해당 화면을 미리 볼 수 있습니다.
• Power Apps Mobile을 사용할 때 구성 요소 라이브러리는 표시되지 않습니다.

구성 요소 가져오기 및 내보내기(사용 중지됨)

참고

이 기능은 사용 중지되었습니다. 구성 요소 라이브러리는 여러 앱에서 구성 요소를 재사용하는 데 권장되는 방법입니다. 구성 요소 라이브러리를 사용할 때 앱은 사용하는 구성 요소에 대한 종속성을 유지 관리합니다. 종속 구성 요소에 대한 업데이트를 사용할 수 있게되면 앱 제작자에게 알림이 표시됩니다. 따라서, 재사용 가능한 모든 새로운 구성 요소는 구성 요소 라이브러리 내에 생성되어야 합니다.

이 기능이 사용 중지되었으므로 구성 요소 가져오기 및 내보내기 기능은 기본적으로 비활성화되어 있습니다. 구성 요소 작업에 권장되는 방법은 구성 요소 라이브러리를 사용하는 것으로, 이 기능이 제거될 때까지 앱별로 이 기능을 예외적으로 계속 활성화할 수 있습니다. 이를 위해 Power Apps Studio에서 앱 편집한 다음 설정 > 예정된 기능 > 사용 중지됨 > 구성 요소 내보내기 및 가져오기 설정을 켭니다.

이 기능을 활성화하면, 다음 기능을 사용하여 구성 요소를 가져오고 내보낼 수 있습니다.

다른 앱에서 구성 요소 가져오기

하나의 앱에서 다른 앱으로 하나 이상의 구성 요소를 가져 오려면 삽입 메뉴에서 구성 요소 가져 오기를 선택하고 사용자 지정 드롭다운 메뉴를 사용합니다. 또는 왼쪽 창의 트리 뷰에서 구성 요소를 사용합니다.

대화 상자에는 편집 권한이 있는 구성 요소가 포함된 모든 앱이 나열됩니다. 앱을 선택한 다음 가져오기를 선택해 해당 앱에 있는 모든 구성 요소의 최신 버전을 가져옵니다. 하나 이상의 구성 요소를 가져온 후 사본을 편집하고 필요없는 구성 요소를 삭제할 수 있습니다.

기존 구성 요소가 있는 앱을 파일에 로컬로 저장한 다음 가져와서 파일을 재사용할 수 있습니다. 파일을 사용하여 구성 요소를 다른 앱으로 가져올 수 있습니다.

앱에 동일한 구성 요소의 수정된 버전이 포함된 경우 수정된 버전을 교체할지 아니면 가져오기를 취소할지 묻는 메시지가 표시됩니다.

앱에서 구성 요소를 만든 후 다른 앱은 이 앱의 구성 요소를 가져와서 사용할 수 있습니다.

참고

다른 앱에서 가져온 구성 요소가 원본 앱에서 수정된 경우 최신 구성 요소 변경 사항을 수신하려면 소비하는 앱에서 구성 요소를 수동으로 다시 가져와야 합니다. 대신 구성 요소 라이브러리를 사용하여 구성 요소 업데이트 작업을 보다 효율적으로 수행하십니다.

앱에서 구성 요소 내보내기

구성 요소를 파일로 내보내고 다른 앱으로 가져오기 위해 다운로드할 수 있습니다.

왼쪽 창의 트리 뷰에서 구성 요소 섹션의 구성 요소 내보내기 옵션을 선택합니다.

또한 삽입 메뉴를 선택하고 사용자 지정 드롭다운 메뉴를 대신 사용할 수 있습니다.

구성 요소 내보내기를 선택하면 구성 요소를 파일로 다운로드합니다.

다운로드한 구성 요소 파일은 .msapp 파일 이름 확장자를 사용합니다.

내보낸 구성 요소 파일에서 구성 요소 가져오기

내보낸 구성 요소 파일에서 구성 요소를 가져오려면 삽입 메뉴에서 구성 요소 가져오기를 선택한 다음 사용자 지정 드롭다운 메뉴를 사용하거나 왼쪽 창의 트리 뷰에서 구성 요소를 사용합니다. 구성 요소 대화 상자에서 파일 업로드를 다른 구성 요소나 앱을 선택하는 대신 선택합니다.

열기 대화 상자에서 구성 요소 파일의 위치를 찾아서 열기를 선택해 앱 내의 구성 요소를 가져옵니다.

내보낸 앱에서 구성 요소 가져오기

파일 > 다른 이름으로 저장 옵션을 사용해 앱을 로컬로 저장할 수 있습니다.

앱을 저장하면 파일에서 구성 요소를 가져오는 것과 동일한 방법을 사용하여 이 앱의 구성 요소를 재사용할 수 있습니다. 이전 섹션에 있는 내보낸 구성 요소 파일에서 구성 요소 가져오기의 단계를 따릅니다.

알려진 제한 사항

• 앱에 동일한 구성 요소의 인스턴스가 두 개 이상 있는 경우 사용자 지정 입력 속성을 동일하거나 다른 인스턴스에서 사용자 지정 출력 속성 값으로 구성할 수 없습니다. 이 작업을 수행하면 순환 참조 경고 메시지가 표시됩니다. 이 제한을 해결하기 위해 앱 내부에 구성 요소의 복사본을 만들 수 있습니다.
• 구성 요소 라이브러리에서 Power Automate 흐름을 추가하고 실행하는 것은 지원되지 않습니다.
• 구성 요소와 함께 해당 데이터 원본(예: 양식, 유동 격자 또는 데이터 테이블)의 데이터가 포함된 데이터 원본 또는 컨트롤을 저장할 수 없습니다.
• 갤러리나 양식에 구성 요소를 삽입할 수 없습니다(SharePoint 양식 포함).
• 구성 요소는 UpdateContext 함수를 지원하지 않지만 Set 함수를 사용해 구성 요소에서 변수를 작성하고 업데이트할 수 있습니다. 이러한 변수의 범위는 구성 요소로 제한되지만 사용자 지정 출력 속성을 통해 구성 요소 외부에서 변수에 액세스할 수 있습니다.

다음 단계

재사용 가능한 구성 요소 저장소를 만드는 구성 요소 라이브러리 사용법을 배울 수 있습니다.

참조 항목

• 구성 요소 라이브러리
• 구성 요소 라이브러리 애플리케이션 수명 주기 관리(ALM)
• 구성 요소의 입력 필드 매핑
• 구성 요소에 멀티미디어 추가
• 구성 요소의 동작 수식
• Power Apps component framework
• 모델 기반 앱의 사용자 지정 페이지에 캔버스 구성 요소 추가

참고

귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)

이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).