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

비밀번호

댓글 작성자
 




... 151  152  153  154  155  156  157  158  [159]  160  161  162  163  164  165  ...
NoWriterDateCnt.TitleFile(s)
1116정성태9/8/201159300Java: 2. 자바에서 "Microsoft SQL Server JDBC Driver" 사용하는 방법
1115정성태9/4/201132395Java: 1. 닷넷 개발자가 처음 실습해 본 서블릿
1114정성태9/4/201136880Math: 2. "Zhang Suen 알고리즘(세선화, Thinning/Skeletonization)"의 C# 버전 [4]파일 다운로드1
1113정성태9/2/201136483개발 환경 구성: 129. Hyper-V에 CentOS 설치하기
1112정성태9/2/201153147Linux: 1. 리눅스 <-> 윈도우 원격 접속 프로그램 사용 [3]
1111정성태8/29/201127279제니퍼 .NET: 16. 적용 사례 (1) - DB Connection Pooling을 사용하지 않았을 때의 성능 저하를 알려주다. [1]
1110정성태8/26/201128967오류 유형: 136. RDP 접속이 불연속적으로 끊기는 문제
1109정성태8/26/201131752오류 유형: 135. 어느 순간 Active Directory 접속이 안되는 문제
1108정성태8/22/201132346오류 유형: 134. OLE/COM Object Viewer - DllRegisterServer in IVIEWERS.DLL failed. [1]
1107정성태8/21/201131225디버깅 기술: 43. Windows Form의 Load 이벤트에서 발생하는 예외가 Visual Studio에서 잡히지 않는 문제
1106정성태8/20/201129809웹: 26. FailedRequestTracing 설정으로 인한 iisexpress.exe 비정상 종료 문제
1105정성태8/19/201128980.NET Framework: 238. Web Site Model 프로젝트에서 Trace.WriteLine 출력이 dbgview.exe에서 확인이 안 되는 문제파일 다운로드1
1104정성태8/19/201129614웹: 25. WebDev보다 IIS Express가 더 나은 점 - 다중 가상 디렉터리 매핑 [1]
1103정성태8/19/201135553오류 유형: 133. WCF 포트 바인딩 실패 오류 - TCP error(10013) [1]
1102정성태8/19/201132446Math: 1. 방탈출3 - Room 10의 '중복가능한 조합' 문제를 위한 C# 프로그래밍 [2]파일 다운로드1
1101정성태8/19/201131972.NET Framework: 237. WCF AJAX 서비스와 JavaScript 간의 DateTime 연동 [1]파일 다운로드1
1100정성태8/17/201131078.NET Framework: 236. SqlDbType - DateTime, DateTime2, DateTimeOffset의 차이점파일 다운로드1
1099정성태8/15/201130200오류 유형: 132. 어느 순간 갑자기 접속이 안 되는 TFS 서버
1098정성태8/15/201152479웹: 24. 네이버는 어떻게 로그인 처리를 할까요? [2]
1097정성태8/15/201123542.NET Framework: 235. 메서드의 메타 데이터 토큰 값으로 클래스를 찾아내는 방법
1096정성태8/15/201127722디버깅 기술: 42. Watson Bucket 정보를 이용한 CLR 응용 프로그램 예외 분석 - (2)
1095정성태8/14/201128033디버깅 기술: 41. Windbg - 비정상 종료된 닷넷 프로그램의 StackTrace에서 보이는 offset 값 의미
1094정성태8/14/201132628오류 유형: 131. Fiddler가 강제 종료된 경우, 웹 사이트 방문이 안되는 현상
1093정성태7/27/201126174오류 유형: 130. Unable to connect to the Microsoft Visual Studio Remote Debugging Monitor ... Access is denied.
1092정성태7/22/201128718Team Foundation Server: 46. 코드 이외의 파일에 대해 소스 제어에서 제외시키는 방법
1091정성태7/21/201127676개발 환경 구성: 128. WP7 Emulator 실행 시 audiodg.exe의 CPU 소모율 증가 [2]
... 151  152  153  154  155  156  157  158  [159]  160  161  162  163  164  165  ...