Microsoft MVP성태의 닷넷 이야기
글쓴 사람
정성태 (seongtaejeong at gmail.com)
홈페이지
첨부 파일
 

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.

혹시 제가 뭔가 놓친 것이 있나요? 아시는 분은 덧글 부탁드립니다. ^^




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]







[최초 등록일: ]
[최종 수정일: 3/27/2025]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 




1  2  3  4  5  6  7  8  9  10  11  12  13  14  [15]  ...
NoWriterDateCnt.TitleFile(s)
13602정성태4/20/202410142닷넷: 2244. C# - PCM 오디오 데이터를 연속(Streaming) 재생 (Windows Multimedia)파일 다운로드1
13601정성태4/19/202410368닷넷: 2243. C# - PCM 사운드 재생(NAudio)파일 다운로드1
13600정성태4/18/202411113닷넷: 2242. C# - 관리 스레드와 비관리 스레드
13599정성태4/17/202410979닷넷: 2241. C# - WAV 파일의 PCM 사운드 재생(Windows Multimedia)파일 다운로드1
13598정성태4/16/202411736닷넷: 2240. C# - WAV 파일 포맷 + LIST 헤더파일 다운로드2
13597정성태4/15/20249947닷넷: 2239. C# - WAV 파일의 PCM 데이터 생성 및 출력파일 다운로드1
13596정성태4/14/202410770닷넷: 2238. C# - WAV 기본 파일 포맷파일 다운로드1
13595정성태4/13/202411061닷넷: 2237. C# - Audio 장치 열기 (Windows Multimedia, NAudio)파일 다운로드1
13594정성태4/12/202410878닷넷: 2236. C# - Audio 장치 열람 (Windows Multimedia, NAudio)파일 다운로드1
13593정성태4/8/20249722닷넷: 2235. MSBuild - AccelerateBuildsInVisualStudio 옵션
13592정성태4/2/202412407C/C++: 165. CLion으로 만든 Rust Win32 DLL을 C#과 연동 [1]
13591정성태4/2/202410680닷넷: 2234. C# - WPF 응용 프로그램에 Blazor App 통합파일 다운로드1
13590정성태3/31/202410601Linux: 70. Python - uwsgi 응용 프로그램이 k8s 환경에서 OOM 발생하는 문제
13589정성태3/29/202410376닷넷: 2233. C# - 프로세스 CPU 사용량을 나타내는 성능 카운터와 Win32 API파일 다운로드1
13588정성태3/28/202411961닷넷: 2232. C# - Unity + 닷넷 App(WinForms/WPF) 간의 Named Pipe 통신 [2]파일 다운로드1
13587정성태3/27/202410340오류 유형: 900. Windows Update 오류 - 8024402C, 80070643
13586정성태3/27/202413947Windows: 263. Windows - 복구 파티션(Recovery Partition) 용량을 늘리는 방법
13585정성태3/26/202411283Windows: 262. PerformanceCounter의 InstanceName에 pid를 추가한 "Process V2"
13584정성태3/26/202413244개발 환경 구성: 708. Unity3D - C# Windows Forms / WPF Application에 통합하는 방법 [9]파일 다운로드1
13583정성태3/25/202410420Windows: 261. CPU Utilization이 100% 넘는 경우를 성능 카운터로 확인하는 방법
13582정성태3/19/202412282Windows: 260. CPU 사용률을 나타내는 2가지 수치 - 사용량(Usage)과 활용률(Utilization)파일 다운로드1
13581정성태3/18/202411475개발 환경 구성: 707. 빌드한 Unity3D 프로그램을 C++ Windows Application에 통합하는 방법
13580정성태3/15/202410242닷넷: 2231. C# - ReceiveTimeout, SendTimeout이 적용되지 않는 Socket await 비동기 호출파일 다운로드1
13579정성태3/13/202411487오류 유형: 899. HTTP Error 500.32 - ANCM Failed to Load dll
13578정성태3/11/202412611닷넷: 2230. C# - 덮어쓰기 가능한 환형 큐 (Circular queue)파일 다운로드1
13577정성태3/9/202411957닷넷: 2229. C# - 닷넷을 위한 난독화 도구 소개 (예: ConfuserEx)
1  2  3  4  5  6  7  8  9  10  11  12  13  14  [15]  ...