[Blazor] Split razor component

참고

• https://www.pragimtech.com/blog/blazor/Split-razor-component/

개요

• 구성 요소 HTML 및 C# 코드를 별도의 파일로 분할하는 방법은 두 가지가 있습니다.
  1. Partial files approach
  2. Base class approach

Single file or Mixed file approach

• HTML 마크업과 C# 코드는 모두 단일 파일에 있습니다.

// Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Partial files approach

• HTML 마크업은 Counter.razor 파일에 남아 있습니다.

// Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

• 컴포넌트가 컴파일 되면, 컴포넌트 파일과 같은 이름의 클래스가 생성된다는 것을 기억합니다.
• 이름이 Counter.razor.cs 인 다른 클래스 파일을 만들고 여기에 다음 코드를 포함합니다.
• 이 파일의 클래스는 partial class 로 구현됩니다.

// Counter.razor.cs

public partial class Counter
{
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

• 솔루션 탐색기의 파일 중첩 버튼을 사용하여 파일 중첩을 토글할 수 있습니다.

Base class approach

• partial class 접근 방식과 마찬가지로 base class 접근 방식을 사용하더라도 HTML 마크업은 Counter.razor 파일에 남아 있습니다.

// Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

• C# 클래스를 별도의 클래스로 이동합니다.
• 예시로 CounterBase 라고 명명하였습니다.
• 클래스 이름은 원하는 대로 지정할 수 있지만, 구성 요소와 이름을 같게 하고 접미사로 뒤에 Base 라고 붙여주는 것이 일반적입니다.
• 이 예제에서 구성 요소의 이름은 Counter 입니다.
• 따라서 C# 코드가 포함된 클래스의 이름은 CounterBase 입니다.
• 클래스는 기본 제공 ComponentBase 클래스에서 상속해야 합니다.
• 이 클래스는 Micorsoft.AspNetCore.Components 네임스페이스에 있습니다.
• HTML 에서 클래스 멤버에 접급하려면 접근 한정자에서 protected 를 사용해야 합니다.

// CounterBase.cs

public class CounterBase : ComponentBase
{
    protected int currentCount = 0;

    protected void IncrementCount()
    {
        currentCount++;
    }
}

• 마지막으로 Counter.razor 파일에 다음 상속 지시문을 포함시킵니다.

@inherits CounterBase