C# - Blazor의 razor 페이지에서 code-behind 파일로 코드를 분리 및 DI 사용법
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
razor 구문의 경우 "@inject"를 이용하면 쉽게 Dependency Injection가 가능합니다.
@page "/counter"
@inject IConfiguration Configuration
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<p>Configuration value: @Configuration.GetConnectionString("db")</p>
그렇다면 코드 파일로 분리한 경우에는 어떻게 해야 할까요? 이에 대해서는 아래의 문서에서 자세히 설명하고 있는데요,
ASP.NET Core Blazor dependency injection
; https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/dependency-injection
간단하게는
InjectAttribute를 통해 가능한데, 아래는 partial class에서의 사용법을 보여줍니다.
public partial class Counter
{
protected int currentCount = 0;
[Inject]
private IConfiguration _configuration { get; set; } = default!;
public Counter()
{
// 생성자 단계에서는 Injection이 되지 않아 사용할 수 없지만,
System.Diagnostics.Trace.WriteLine($"IConfiguration _configuration == {(_configuration == null ? "(null)" : $"{_configuration}")}");
}
protected async Task IncrementCount()
{
// 개체 생성 후의 단계에서는 Injection이 되어 사용할 수 있습니다.
System.Diagnostics.Trace.WriteLine($"IConfiguration _configuration == {(_configuration == null ? "(null)" : $"{_configuration}")}");
currentCount++;
}
}
또는, (partial class로 정의했기 때문에) razor에서 "@inject IConfiguration Configuration"를 추가하고,
@page "/counter"
@inject IConfiguration Configuration
@rendermode InteractiveServer
...[생략]...
이것을 그냥 바로 가져다 사용하는 것도 가능합니다.
public partial class Counter
{
protected int currentCount = 0;
protected async Task IncrementCount()
{
string cs = this.Configuration.GetConnectionString("testdb");
currentCount++;
}
}
(물론, partial class가 아닌 상속으로 처리한 코드 파일이라면 razor에서 정의한 DI 인스턴스를 코드에서 쓸 수는 없습니다.)
그런데, 문서상으로 좀 이상한 것이 있는데요, 아래의 링크를 보면,
Constructor injection
; https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/dependency-injection
Primary Constructor 구문을 이용한 Constructor injection 예제를 소개하고 있습니다.
@page "/constructor-injection"
<button @onclick="HandleClick">
Take me to the Counter component
</button>
using Microsoft.AspNetCore.Components;
public partial class ConstructorInjection(IConfiguration configuration)
{
protected int currentCount = 0;
protected void IncrementCount()
{
currentCount++;
string text = configuration.GetConnectionString("BloggingDatabase") ?? "(null)";
System.Diagnostics.Trace.WriteLine(text);
}
}
그런데, 실제로 저 코드를 실행해 보면 이런 예외가 발생합니다.
MissingMethodException: Cannot dynamically create an instance of type 'BlazorWebAppServerTest.Components.Pages.Counter'. Reason: No parameterless constructor defined.
혹시 제가 뭔가 놓친 것이 있나요? 아시는 분은 덧글 부탁드립니다. ^^
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]