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

5분

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

이 단원에서는 Razor 클래스 라이브러리를 만들고 이를 사용하여 Blazor 애플리케이션이 사용자 지정하고 표시할 수 있도록 렌더링된 정적 콘텐츠를 공유하는 방법을 알아봅니다.

Razor 클래스 라이브러리란?

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

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

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

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

Screenshot of the

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

dotnet new razorclasslib -o MyProjectName

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

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

Screenshot of Visual Studio Solution Explorer, showing the default project contents.

클래스 라이브러리와 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>

프로젝트 파일은 Microsoft.NET.Sdk.Razor에 대한 SDK 참조를 포함하여 Razor 클래스 라이브러리로 Razor 콘텐츠를 만들고 포함한다고 선언합니다.
SupportedPlatform 항목은 이 라이브러리를 browser 플랫폼, 즉 WebAssembly에서 사용할 수 있음을 선언합니다.
Microsoft.AspNetCore.Components.Web 라이브러리에 대한 PackageReference는 프레임워크와 함께 배달되는 기본 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는 2픽셀 파선 빨간색 테두리와 wwwroot 폴더의 background.png 이미지를 사용하는 배경 이미지 스타일을 추가합니다. 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 클래스 라이브러리 참조

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

dotnet add reference ../MyClassLibrary

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

dotnet add package MyClassLibrary

지식 점검

계속