Component 태그 헬퍼(Component Tag Helper)

• 11/8/2025
• 4 minutes to read

ASP.NET Core Component Tag Helper는 Razor 페이지나 MVC View에서 Blazor 컴포넌트(.razor 파일) 를 직접 포함하고 렌더링할 수 있게 해주는 기능입니다. 이를 통해 Blazor 컴포넌트를 기존 Razor 기반 프로젝트에 손쉽게 통합할 수 있으며, 코드의 재사용성, 일관성, 유지보수성을 크게 향상시킬 수 있습니다.

1. Component Tag Helper의 기본 개념

Component Tag Helper는 일반 HTML 태그처럼 작성되지만, 내부적으로는 지정된 Blazor 컴포넌트를 렌더링합니다. 즉, Razor 파일(.cshtml) 안에서 C# 기반의 Blazor UI 컴포넌트를 직접 호출할 수 있습니다.

이 기능을 활용하면 기존 MVC 프로젝트에 Blazor 컴포넌트를 점진적으로 도입할 수 있습니다. 예를 들어, MVC View 내부에서 부분적으로 Blazor UI를 사용하여 폼 입력, 데이터 표시, 대화형 UI 등을 구현할 수 있습니다.

2. 기본 구문

<component type="typeof(컴포넌트명)" render-mode="RenderMode옵션" param-매개변수명="값" />

3. 사용 예시

아래는 ASP.NET Core의 Razor 뷰(.cshtml)에서 여러 Blazor 컴포넌트를 포함하는 샘플입니다.

<component type="typeof(Zero.Pages.Interests.InterestsTabs)"
           render-mode="ServerPrerendered"
           param-ParentKey="@Model.ParentKey"
           param-Id="@Model.Id"
           param-PageName="pageName"
           param-UserId="@userId"
           param-UserName="@userName" />

<component type="typeof(Zero.Pages.IncidentsAttachments.Manage)"
           render-mode="ServerPrerendered"
           param-ParentKey="@Model.ParentKey" />

<component type="typeof(Zero.Pages.Memos.Manage)"
           render-mode="ServerPrerendered"
           param-ParentKey="@Model.ParentKey"
           param-UserId="@userId"
           param-UserName="@userName" />

이처럼 <component /> 태그를 사용하면 Razor 페이지 안에서 Blazor의 UI 컴포넌트를 직접 호출하고, 매개변수를 전달하여 동적으로 렌더링할 수 있습니다.

4. 실습 예제 – MVC View에서 Blazor 컴포넌트 포함하기

다음은 DotNetNote 프로젝트 내에서 MVC View에 Blazor 컴포넌트를 정적으로 포함하여 폼 형태의 UI를 렌더링하는 실습 예제입니다.

(1) 컨트롤러

파일: DotNetNote\Controllers\ApplicationFormBuilderController.cs

using Microsoft.AspNetCore.Mvc;

namespace DotNetNote.Controllers
{
    public class ApplicationFormBuilderController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

(2) Razor View (.cshtml)

파일: DotNetNote\Views\ApplicationFormBuilder\Index.cshtml

@{
    Layout = null;
}

<component 
    type="typeof(ApplicationFormBuilder.ApplicationFormComponent)" 
    render-mode="Static">
</component>

이 View 파일에서는 <component> 태그를 사용하여 Blazor 컴포넌트를 직접 렌더링합니다. render-mode="Static"은 서버에서 한 번만 렌더링하고 상호작용은 없는 정적 HTML 출력을 의미합니다.

(3) 상위 컴포넌트

파일: DotNetNote\Components\Pages\ApplicationFormBuilderPages\ApplicationFormComponent.razor

@namespace ApplicationFormBuilder
@using ApplicationFormBuilder.Sections

<h3>ApplicationFormComponent</h3>

<PersonalInformation></PersonalInformation>
<BusinessInterest></BusinessInterest>
<MaritalInformation></MaritalInformation>
<Residences></Residences>
<MilitaryExperience></MilitaryExperience>

이 컴포넌트는 여러 섹션 컴포넌트를 포함한 “상위 폼” 역할을 합니다. 각 <Section> 컴포넌트는 별도의 Razor 파일로 구성되어 있으며, 실제 폼 섹션을 독립적으로 관리할 수 있습니다.

(4) 하위 컴포넌트 (Sections)

파일: DotNetNote\Components\Pages\ApplicationFormBuilderPages\Sections\PersonalInformation.razor

@namespace ApplicationFormBuilder.Sections

<h4>PersonalInformation</h4>

파일: DotNetNote\Components\Pages\ApplicationFormBuilderPages\Sections\BusinessInterest.razor

@namespace ApplicationFormBuilder.Sections

<h4>BusinessInterest</h4>

이와 같은 방식으로 각 섹션(PersonalInformation, BusinessInterest, MaritalInformation 등)을 독립적으로 관리하면 코드의 재사용성이 높아지고, Blazor 기반 폼을 유연하게 확장할 수 있습니다.

5. 주요 활용 예

• UI 재사용성 강화 – 공통 폼, 탭, 리스트, 대화상자 등을 컴포넌트로 재사용
• 점진적 Blazor 통합 – 기존 MVC/Razor 앱에 부분적으로 Blazor 기능 도입
• 서버 렌더링 + 실시간 상호작용 – ServerPrerendered 모드로 초기 렌더링 후 SignalR을 통한 상호작용 지원

6. 참고 문서

• Microsoft Learn - Component Tag Helper