Blog

구성 요소 HTML 및 C# 코드를 별도의 파일로 분할하는 두 가지 방법이 있습니다.

1. 부분 파일 접근법
2. 기본 클래스 접근 방식

단일 파일 또는 혼합 파일 접근 방식

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++;
    }
}

부분 파일 접근법

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인 다른 클래스 파일을 만들고 다음 코드를 포함합니다. 이 파일의 클래스는 부분 클래스로 구현됩니다.

Counter.razor

@page "/counter"

<h1>Counter</h1>

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

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

솔루션 탐색기의 파일 중첩 단추를 사용하여 파일 중첩을 전환할 수 있습니다 .

기본 클래스 접근 방식

부분 클래스 접근 방식과 마찬가지로 기본 클래스 접근 방식을 사용하더라도 HTML 태그는 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 클래스에서 상속해야 합니다. 이 클래스는 Microsoft.AspNetCore.Components 네임스페이스 에 있습니다 .

액세스 수정자는 HTML에서 클래스 멤버에 액세스하려는 경우만 가능해야합니다

CounterBase.cs

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

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

반드시 처음에 아래 상속 지시문을 넣어야합니다.

@inherits CounterBase