ASP.NET Core Blazor Hybrid에서 Razor 구성 요소 다시 사용
참고 항목
이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 9 버전을 참조 하세요.
Important
이 정보는 상업적으로 출시되기 전에 실질적으로 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적, 또는 묵시적인 보증을 하지 않습니다.
현재 릴리스는 이 문서의 .NET 9 버전을 참조 하세요.
이 문서에서는 Blazor Hybrid 앱에서 웹 및 Web Views에 대한 Razor 구성 요소를 작성하고 구성하는 방법을 설명합니다.
Razor 구성 요소는 호스팅 모델(Blazor WebAssembly, Blazor Server 및 Blazor Hybrid의 Web View 모델) 및 플랫폼(Android, iOS 및 Windows)에서 작동합니다. 호스팅 모델 및 플랫폼에는 구성 요소가 활용할 수 있는 고유한 기능이 있지만 호스팅 모델 및 플랫폼에서 실행되는 구성 요소는 고유한 기능을 별도로 활용해야 하며, 다음 예제에서 이러한 방법을 보여 줍니다.
- Blazor WebAssembly는 Blazor Hybrid 앱의 Blazor Server 및 Web Views에서 엄격한 비동기 JS interop 통신 채널이 지원하지 않는 동기 JS(JavaScript) interop을 지원합니다.
- Blazor Server 앱의 구성 요소는 Entity Framework 데이터베이스 컨텍스트와 같이 서버에서만 사용할 수 있는 서비스에 액세스할 수 있습니다.
BlazorWebView의 구성 요소는 지리적 위치 서비스와 같은 네이티브 데스크톱 및 모바일 디바이스 기능에 직접 액세스할 수 있습니다. Blazor Server 및 Blazor WebAssembly 앱은 유사한 기능을 제공하려면 외부 서버에서 앱의 웹 API 인터페이스를 사용해야 합니다.
디자인 원칙
호스팅 모델 및 플랫폼에서 원활하게 작동할 수 있는 Razor 구성 요소를 작성하려면 다음 디자인 원칙을 준수합니다.
- RCL(Razor 클래스 라이브러리)에 공유 UI 코드를 배치합니다. 이 라이브러리는 다양한 호스팅 모델 및 플랫폼에서 사용할 수 있게 재사용 가능한 UI 부분을 유지 관리하도록 설계된 컨테이너입니다.
- RCL에서는 고유한 기능을 구현하지 않아야 합니다. 대신 RCL은 호스팅 모델 및 플랫폼에서 구현하는 추상화(인터페이스 및 기본 클래스)를 정의해야 합니다.
- 모델 또는 플랫폼을 호스팅하여 고유한 기능만 옵트인합니다. 예를 들어 Blazor WebAssembly은(는) 구성 요소에서 IJSInProcessRuntime와(과) IJSInProcessObjectReference의 사용을 최적으로 지원하지만 모든 호스팅 모델 및 플랫폼에서 지원하는 범용 IJSRuntime 및 IJSObjectReference 추상화에 의존하는 조건부 캐스트 및 대체 구현에서만 사용합니다. IJSInProcessRuntime에 대한 자세한 내용은 ASP.NET Core의 .NET 메서드에서 JavaScript 함수 호출Blazor을 참조하세요. IJSInProcessObjectReference에 대한 자세한 내용은 ASP.NET Core의 JavaScript 함수에서 .NET 메서드를 호출Blazor을 참조하세요.
- 일반적으로 구성 요소에서 HTML 스타일 지정에 CSS를 사용합니다. 가장 일반적인 경우는 앱의 모양과 느낌에서 일관성을 유지하기 위해서 입니다. 호스팅 모델 또는 플랫폼에서 UI 스타일이 달라야 하는 경우 CSS를 사용하여 차이점을 지정합니다.
- UI의 일부에서 대상 호스팅 모델 또는 플랫폼에 대해 추가 콘텐츠 또는 다른 콘텐츠가 필요한 경우
DynamicComponent를 사용하여 콘텐츠를 구성 요소 내부에 캡슐화하고 RCL 내에서 렌더링할 수 있습니다. RenderFragment 인스턴스를 통해 구성 요소에 추가 UI를 제공할 수도 있습니다. RenderFragment에 대한 자세한 내용은 자식 콘텐츠 렌더링 조각 및 재사용 가능한 렌더링 논리에 대한 렌더링 조각을 참조하세요.
프로젝트 코드 조직
Razor 클래스 라이브러리(RCL)에 코드 및 정적 콘텐츠를 최대한 많이 배치합니다. 각 호스팅 모델 또는 플랫폼은 RCL을 참조하고 Razor 구성 요소에 필요할 수 있는 앱의 서비스 컬렉션에 개별 구현을 등록합니다.
각 대상 어셈블리에는 해당 호스팅 모델 또는 플랫폼과 관련된 코드와 앱을 부트스트랩하는 데 도움이 되는 코드만 포함해야 합니다.
고유한 기능에 추상화 사용
다음 예제에서는 모델 및 플랫폼을 호스팅하여 지리적 위치 서비스에 추상화를 사용하는 방법을 보여 줍니다.
- 앱이 지도에서 사용자 위치에 대한 지리적 위치 데이터를 가져오는 데 사용하는 Razor 클래스 라이브러리(RCL)에서
MapComponentRazor 구성 요소는ILocationService서비스 추상화를 삽입합니다. - Blazor WebAssembly 및 Blazor Server 프로젝트에 대한
App.Web은 웹 API 호출을 사용하여 지리적 위치 데이터를 가져오는WebLocationService로ILocationService를 구현합니다. - .NET MAUI, WPF 및 Windows Forms에 대한
App.Desktop은ILocationService를DesktopLocationService로 구현합니다.DesktopLocationService는 플랫폼별 디바이스 기능을 사용하여 지리적 위치 데이터를 가져옵니다.
.NET MAUIBlazor 플랫폼별 코드
.NET MAUI의 일반적인 패턴은 플랫폼별 구현을 사용하여 부분 클래스를 정의하는 등 다른 플랫폼에 대해 별도의 구현을 만드는 것입니다. 예를 들면 다음 다이어그램을 참조하세요. 여기서 CameraService에 대한 부분 클래스는 CameraService.Windows.cs, CameraService.iOS.cs, CameraService.Android.cs 및 CameraService.cs에 각각 구현됩니다.
플랫폼별 기능을 다른 앱에서 사용할 수 있는 클래스 라이브러리로 압축하려는 경우 이전 예제에 설명된 것과 유사한 방식을 따르고 Razor 구성 요소에 대한 추상화를 만드는 것이 좋습니다.
- Razor 클래스 라이브러리(RCL)에 구성 요소를 배치합니다.
- .NET MAUI 클래스 라이브러리에서 RCL을 참조하고 플랫폼별 구현을 만듭니다.
- 사용 중인 앱 내에서 .NET MAUI 클래스 라이브러리를 참조합니다.
다음 예제에서는 사진을 구성하는 앱에서 이미지에 대한 개념을 보여 줍니다.
- .NET MAUIBlazor Hybrid 앱은 참조하는 RCL에서
InputPhoto를 사용합니다. - .NET MAUI 앱도 .NET MAUI 클래스 라이브러리를 참조합니다.
- RCL에서
InputPhoto는 RCL에 정의된ICameraService인터페이스를 삽입합니다. ICameraService에 대한CameraServicepartial 클래스 구현은 RCL을 참조하는 .NET MAUI 클래스 라이브러리(CameraService.Windows.cs,CameraService.iOS.cs,CameraService.Android.cs)에 있습니다.
예제는 .을 사용하여 앱 빌드를Blazor Web AppBlazor Hybrid .NET MAUI참조하세요.
ASP.NET Core