C# - Blazor의 razor 페이지에서 code-behind 파일로 코드를 분리하는 방법
Blazor 프로젝트를 생성하면 기본적으로 Counter 페이지 예제가 제공되는데요,
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
혹시 저기서 @code 블록을 별도의 C# 코드 파일로 분리할 수 있지 않을까요? 검색해 보니 바로 방법이 나옵니다. ^^;
How to split Blazor WASM components code of C# and HTML in different files? [duplicate]
; https://stackoverflow.com/questions/59934099/how-to-split-blazor-wasm-components-code-of-c-sharp-and-html-in-different-files
정리하면, 2가지 방법으로 나뉘는데요, 첫 번째 방법은 상속을 이용해 분리하는 것입니다. 예를 들면, 코드 파일을 하나 추가해 ComponentBase를 상속받는 클래스를 만들어 그 안에 C# 코드를 분리하는데,
using Microsoft.AspNetCore.Components;
namespace BlazorWebAppServerPerPage8.Components.Pages;
public class HomeComponent : ComponentBase
{
protected int currentCount = 0;
protected void IncrementCount()
{
currentCount++;
}
}
이때 razor 페이지에서 사용할 멤버에 대해서는 "protected"로 선언해야 합니다. 왜냐하면, razor 페이지에서는 아래와 같이 "@inherits"를 사용해 상속으로 처리하기 때문입니다.
@page "/counter"
@inherits MyComponent
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
두 번째 방법은 partial 클래스를 이용하는 것인데요, 역시 마찬가지로 C# 코드 파일을 추가한 다음 이번에는 단순히 Razor 페이지 파일명과 동일하게 partial class를 하나 만들어 분리하면 됩니다.
namespace BlazorApp1.Components.Pages;
public partial class Counter
{
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
대신 이번에는 partial class의 특성 덕분에 굳이 protected 접근자로 변경해야 할 필요가 없습니다.
그나저나, 굳이 코드 파일을 분리할 필요가 있을까요? 물론, 코드가 길어지면 가독성을 높이기 위해 분리하는 것이 좋겠습니다. 그 외에도 Visual Studio로 다른 PC에서 디버깅하기 위해 attach to process로 연결할 때 코드 파일이 분리돼 있어야 BP(Breakpoint)가 제대로 동작하는 경우도 있으니 참고하시기 바랍니다. ^^
마지막으로, razor 페이지와 code-behind 파일을 분리했으면 그룹핑시켜 두는 것도 관리 측면에서 도움이 될 것입니다. ^^
Visual Studio - Code-behind처럼 cs 파일을 그룹핑하는 방법
; https://www.sysnet.pe.kr/2/0/13886
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]