component 태그 헬퍼

• 3/13/2023
• 2 minutes to read

ASP.NET Core Component Tag Helpers는 Razor 페이지와 뷰에서 사용되는 HTML 태그를 대신하여 사용되는 Razor 템플릿 기반의 컴포넌트입니다. 컴포넌트를 사용하면 코드의 재사용성이 증가하고 코드의 가독성이 향상되는 등의 이점이 있습니다.

컴포넌트 태그 헬퍼는 일반적으로 Razor 파일에서 사용되는 HTML 태그를 대체하고 Razor 파일에서 C# 코드를 포함할 수 있는 컴포넌트로 사용됩니다. 이러한 컴포넌트는 Razor 파일에서 렌더링될 때 Razor 엔진에 의해 HTML 코드로 변환됩니다.

ASP.NET Core Component Tag Helper는 다음과 같은 형식을 가집니다.

<component-name parameter1="value1" parameter2="value2"></component-name>

여기서 component-name은 사용하려는 컴포넌트의 이름이고, parameter1, parameter2 등은 컴포넌트에 전달할 매개변수 이름과 값입니다.

컴포넌트 태그 헬퍼는 일반적으로 다음과 같은 용도로 사용됩니다.

• HTML 폼 컨트롤과 관련된 작업, 예를 들어 사용자 입력을 수집하고 검증하는 것과 같은 작업
• 데이터의 표시 및 조작, 예를 들어 데이터를 테이블로 표시하고 페이징과 정렬과 같은 작업
• 비동기 데이터 로딩, 예를 들어 SPA(Single Page Application)의 콘텐츠 로딩과 같은 작업

컴포넌트 태그 헬퍼를 사용하여 UI를 더욱 쉽고 효율적으로 만들 수 있으며, 코드의 재사용성을 높일 수 있습니다.

component 태그 헬퍼 사용 샘플 코드

ASP.NET Core의 *.cshtml 파일에서 Blazor의 *.razor 파일을 포함해서 실행할 때 사용되는 <component /> 태그 헬퍼에 대한 코드 조각을 가끔 생각나지 않을 때 찾아볼 용도로 이곳에 기록합니다.

<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" />

추가적인 정보는 다음 링크를 참고하세요.

• Microsoft Learn - component 태그 헬퍼