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

비밀번호

댓글 작성자
 




... 61  62  63  64  65  66  67  68  69  70  71  72  [73]  74  75  ...
NoWriterDateCnt.TitleFile(s)
12203정성태3/18/202022776오류 유형: 612. warning: 'C:\ProgramData/Git/config' has a dubious owner: '...'.
12202정성태3/18/202026164개발 환경 구성: 486. .NET Framework 프로젝트를 위한 GitLab CI/CD Runner 구성
12201정성태3/18/202022708오류 유형: 611. git-credential-manager.exe: Using credentials for username "Personal Access Token". [1]
12200정성태3/18/202022719VS.NET IDE: 145. NuGet + Github 라이브러리 디버깅 관련 옵션 3가지 - "Enable Just My Code" / "Enable Source Link support" / "Suppress JIT optimization on module load (Managed only)"
12199정성태3/17/202020877오류 유형: 610. C# - CodeDomProvider 사용 시 Unhandled Exception: System.IO.DirectoryNotFoundException: Could not find a part of the path '...\f2_6uod0.tmp'.
12198정성태3/17/202024281오류 유형: 609. SQL 서버 접속 시 "Cannot open user default database. Login failed."
12197정성태3/17/202023715VS.NET IDE: 144. .NET Core 콘솔 응용 프로그램을 배포(publish) 시 docker image 자동 생성 - 두 번째 이야기 [1]
12196정성태3/17/202020242오류 유형: 608. The ServicedComponent being invoked is not correctly configured (Use regsvcs to re-register).
12195정성태3/16/202022508.NET Framework: 902. C# - 프로세스의 모든 핸들을 열람 - 세 번째 이야기
12194정성태3/16/202025786오류 유형: 607. PostgreSQL - Npgsql.NpgsqlException: sorry, too many clients already
12193정성태3/16/202023100개발 환경 구성: 485. docker - SAP Adaptive Server Enterprise 컨테이너 실행 [1]
12192정성태3/14/202023689개발 환경 구성: 484. docker - Sybase Anywhere 16 컨테이너 실행
12191정성태3/14/202025220개발 환경 구성: 483. docker - OracleXE 컨테이너 실행 [1]
12190정성태3/14/202019700오류 유형: 606. Docker Desktop 업그레이드 시 "The process cannot access the file 'C:\Program Files\Docker\Docker\resources\dockerd.exe' because it is being used by another process."
12189정성태3/13/202025069개발 환경 구성: 482. Facebook OAuth 처리 시 상태 정보 전달 방법과 "유효한 OAuth 리디렉션 URI" 설정 규칙
12188정성태3/13/202033275Windows: 169. 부팅 시점에 실행되는 chkdsk 결과를 확인하는 방법
12187정성태3/12/202020462오류 유형: 605. NtpClient was unable to set a manual peer to use as a time source because of duplicate error on '...'.
12186정성태3/12/202021366오류 유형: 604. The SysVol Permissions for one or more GPOs on this domain controller and not in sync with the permissions for the GPOs on the Baseline domain controller.
12185정성태3/11/202022560오류 유형: 603. The browser service was unable to retrieve a list of servers from the browser master...
12184정성태3/11/202024881오류 유형: 602. Automatic certificate enrollment for local system failed (0x800706ba) The RPC server is unavailable. [3]
12183정성태3/11/202021166오류 유형: 601. Warning: DsGetDcName returned information for \\[...], when we were trying to reach [...].
12182정성태3/11/202023072.NET Framework: 901. C# Windows Forms - Vista/7 이후의 Progress Bar 업데이트가 느린 문제파일 다운로드1
12181정성태3/11/202023524기타: 76. 재현 가능한 최소한의 예제 프로젝트란? - 두 번째 예제파일 다운로드1
12180정성태3/10/202020237오류 유형: 600. "Docker Desktop for Windows" - EXPOSE 포트가 LISTENING 되지 않는 문제
12179정성태3/10/202030866개발 환경 구성: 481. docker - PostgreSQL 컨테이너 실행
12178정성태3/10/202024763개발 환경 구성: 480. Linux 운영체제의 docker를 위한 tcp 바인딩 추가 [1]
... 61  62  63  64  65  66  67  68  69  70  71  72  [73]  74  75  ...