템플릿 구성 요소 이해

여러 앱에서 재사용할 수 있는 템플릿 구성 요소는 UI 요소 사용자 지정을 위해 시도되고 테스트된 레이아웃과 논리의 기초를 제공합니다. 템플릿 구성 요소는 공통 요소를 정의하고 모든 페이지에 적용하여 웹앱에서 표준화된 디자인을 적용합니다. 중앙 템플릿 위치에서만 수정하기 때문에 템플릿은 리브랜딩과 같은 업데이트를 간소화할 수 있습니다.

이 단원에서는 템플릿 구성 요소를 만드는 방법과 Blazor 애플리케이션에 통합하는 방법을 알아봅니다.

RenderFragment 형식

템플릿 구성 요소는 하나 이상의 HTML 태그 조각에 대한 레이아웃 및 논리를 제공합니다. HTML은 템플릿 구성 요소가 제공하는 컨텍스트를 사용하여 렌더링합니다. 템플릿 구성 요소는 RenderFragment 개체를 런타임에 태그가 삽입되는 자리 표시자로 사용합니다.

템플릿은 일반 Razor 구성 요소일 뿐입니다. 템플릿을 사용하기 위해 소비 구성 요소는 다른 구성 요소와 마찬가지로 템플릿을 참조합니다. ChildContent 이름은 RenderFragment 매개 변수의 기본 이름입니다. 매개 변수에 다른 이름을 지정할 수 있지만 테스트 페이지가 템플릿을 적용할 때 이 이름을 지정해야 합니다.

제네릭 RenderFragment<T> 매개 변수

기본적으로 RenderFragment 클래스는 HTML 태그 블록의 자리 표시자 역할을 합니다. 그러나 형식 매개 변수를 사용하고 템플릿 구성 요소에서 지정된 형식을 처리하는 논리를 제공하여 다른 형식의 콘텐츠를 렌더링하는 데 제네릭 형식 RenderFragment<TValue>를 사용할 수 있습니다.

예를 들어 컬렉션의 항목을 표시하는 템플릿을 만들려고 한다고 가정합니다. C# foreach 루프를 사용하여 컬렉션을 반복하고 찾은 항목을 표시할 수 있습니다. 그러나 컬렉션에는 모든 형식의 데이터가 포함될 수 있으므로 각 항목을 렌더링하는 일반적인 방법이 필요합니다.

제네릭 형식 템플릿 구성 요소를 작성하려면 템플릿 구성 요소 자체의 형식 매개 변수와 템플릿의 소비 구성 요소를 지정해야 합니다. 다음 목록은 제네릭 형식 템플릿 구성 요소의 일반적인 특성을 나타냅니다.

• 템플릿 구성 요소의 형식 매개 변수는 @typeparam 지시문을 사용하여 도입됩니다. 템플릿 구성 요소에는 필요한 경우 여러 형식 매개 변수가 있을 수 있습니다.
• 템플릿은 형식 매개 변수로 지정된 형식의 개체의 열거 가능한 컬렉션이 포함된 매개 변수를 정의할 수 있습니다.
• 또한 템플릿은 동일한 형식 매개 변수를 갖는 제네릭 ChildContent 형식을 기반으로 RenderFragment 매개 변수를 정의합니다.

자세한 내용은 ASP.NET Core 템플릿 기반 구성 요소를 참조하세요.