Razor 클래스 라이브러리 만들기 및 개념

웹 애플리케이션의 구성 요소를 통해 개발자는 애플리케이션 전체에서 애플리케이션 사용자 인터페이스의 일부를 다시 사용할 수 있습니다. 개발자는 Razor 클래스 라이브러리를 사용하여 여러 애플리케이션에서 이러한 구성 요소를 공유하고 다시 사용할 수 있습니다.

이 단원에서는 Razor 클래스 라이브러리를 만드는 방법을 알아봅니다. 그런 다음 이를 사용하여 Blazor 애플리케이션에 대한 렌더링된 정적 콘텐츠를 공유하여 사용자 지정하고 표시합니다.

Razor 클래스 라이브러리

Razor 클래스 라이브러리는 .NET 프로젝트 형식입니다. 여기에는 Blazor 애플리케이션에서 참조할 수 있는 Razor 구성 요소, 페이지, HTML, CSS(Cascading Style Sheet) 파일, JavaScript, 이미지 및 기타 정적 웹 콘텐츠가 포함됩니다. 다른 .NET 클래스 라이브러리 프로젝트와 마찬가지로 Razor 클래스 라이브러리는 NuGet 패키지로 번들로 제공되고 NuGet.org 같은 NuGet 패키지 리포지토리에서 공유할 수 있습니다.

Razor 클래스 라이브러리를 만들기 위한 기본 템플릿을 살펴보겠습니다.

기본 템플릿을 사용하여 프로젝트 만들기

필요에 따라 새 파일>프로젝트를 선택하여 Visual Studio에서 Razor 클래스 라이브러리 만들기를 시작할 수 있습니다.

다음 명령을 실행하여 명령줄 인터페이스에서 프로젝트를 만들 수도 있습니다.

dotnet new razorclasslib -o MyProjectName

이 템플릿은 구성 요소에서 사용할 수 있는 몇 가지 중요한 기능을 포함하는 Component1이라는 초기 구성 요소를 제공합니다.

• component1.razor와 동일한 폴더에 저장되는 Component1.razor.css이라는 격리된 계단식 스타일시트입니다. Component1.razor.css 파일은 Component1을 참조하는 Blazor 애플리케이션에 조건부로 포함됩니다.
• 런타임에 Blazor 애플리케이션에서 사용할 수 있고 Component1 내에서 참조되는 이미지 및 JavaScript 파일과 같은 정적 콘텐츠입니다. 이 콘텐츠는 ASP.NET Core 또는 Blazor 애플리케이션의 wwwroot 폴더와 동일한 방식으로 동작하는 wwwroot 폴더에 전달됩니다.
• 포함된 JavaScript 파일에 상주하는 함수를 실행하는 .NET 코드입니다.

클래스 라이브러리와 Razor 클래스 라이브러리의 차이점

클래스 라이브러리는 .NET 애플리케이션의 일반적인 패키지 배달 구조이며 Razor 클래스 라이브러리는 프로젝트 파일에 구성된 몇 가지 다른 기능과 구조에서 유사합니다.

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  
  <ItemGroup>
    <SupportedPlatform Include="browser" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
  </ItemGroup>

</Project>

• 프로젝트 파일에는 Razor 콘텐츠가 포함되어 있음을 선언하고 Razor 클래스 라이브러리로 만드는 Microsoft.NET.Sdk.Razor 에 대한 SDK 참조가 포함되어 있습니다.
• SupportedPlatform 항목은 이 라이브러리를 browser, 즉 WebAssembly 플랫폼에서 사용할 수 있음을 선언하고 있습니다.
• PackageReference 라이브러리에 Microsoft.AspNetCore.Components.Web 대한 액세스를 통해 프레임워크와 함께 제공되는 기본 Blazor 구성 요소에 액세스할 수 있습니다. 이 액세스를 통해 이러한 간단한 구성 요소를 사용하여 더 복잡한 구성 요소를 빌드할 수 있습니다.

Razor 구성 요소의 콘텐츠

이 초기 Razor 구성 요소는 간단합니다. 짧은 텍스트 블록이 있는 HTML div 요소만 포함됩니다.

<div class="my-component">
    This component is defined in the <strong>FirstRazorLibrary</strong> library.
</div>

이 구성 요소는 동일한 프로젝트에서 전달된 구성 요소가 동작할 것으로 예상하는 것과 동일한 방식으로 해당 구성 요소를 참조하는 다른 Blazor 구성 요소 및 페이지와 상호 작용합니다. 즉, Component1.razor.css 파일의 CSS 격리 스크립트는 application.css 파일의 나머지 애플리케이션 CSS와 인라인으로 렌더링됩니다.

정적 자산 제공

다른 콘텐츠와 함께 wwwroot 폴더의 내용을 상대적으로 참조할 수 있습니다. 구성 요소의 개별 CSS 파일(예: Component1.razor.css)을 동일한 기본 폴더의 파일로 상대적으로 참조할 수도 있습니다. 예를 들어 기본 CSS는 wwwroot 폴더의 background.png 이미지를 사용하는 2픽셀 파선 빨간색 테두리와 배경 이미지 스타일을 추가합니다. CSS에서 wwwroot 폴더에 있는 콘텐츠로 이 참조를 만드는 데 필요한 경로는 없습니다.

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

wwwroot 폴더의 내용은 다음과 같은 형식의 절대 폴더 참조를 사용하여 호스팅된 Blazor 애플리케이션에서 참조할 수 있습니다.

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

Razor 클래스 라이브러리 참조

라이브러리를 참조하는 Blazor 애플리케이션 옆에 있는 디스크에 Razor 클래스 라이브러리가 있는 .NET 솔루션에서는 다음과 같이 표준 Visual Studio 참조 추가 대화 상자를 사용하고 .NET CLI add reference 명령을 사용하여 Blazor 애플리케이션을 업데이트하여 Razor 클래스 라이브러리를 참조할 수 있습니다.

dotnet add reference ../MyClassLibrary

NuGet 패키지 형식으로 제공되는 라이브러리의 경우 다음과 같이 Visual Studio NuGet 패키지 설치 관리자를 사용하거나 .NET CLI add package 명령을 사용하여 참조를 추가할 수 있습니다.

dotnet add package MyClassLibrary