Templated Component

🏄‍♀️ 1. Templated Component란?

Blazor의 Templated Component는 C++의 template, C#의 generics와 유사한 개념입니다. 다양한 타입의 데이터를 처리할 수 있는 재사용 가능한 컴포넌트를 만들 수 있게 해줍니다.

@typeparam TItem

• 제네릭 타입을 선언합니다. (TItem은 사용자 정의 이름)
• 이 선언을 통해 이후 모든 타입을 유연하게 처리할 수 있습니다.

---

🧩 2. 예시 컴포넌트 구조 - TableTemplate.razor

@using BlazorApp.Data
@typeparam TItem

<h3>TableTemplate</h3>
<table class="table">
    <thead>
        <tr>
            @Header
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr>
                @Row(item)
            </tr>
        }
    </tbody>
</table>

@code {
    [Parameter] public RenderFragment Header { get; set; }
    [Parameter] public RenderFragment<TItem> Row { get; set; }
    [Parameter] public IReadOnlyList<TItem> Items { get; set; }
}

✅ 주요 개념 정리:

키워드	설명
@typeparam TItem	컴포넌트의 제네릭 타입 선언. 다양한 타입을 TItem으로 처리 가능
RenderFragment	HTML 구조 전체를 매개변수로 넘김
RenderFragment<TItem>	특정 데이터 타입의 항목마다 렌더링할 HTML 구조를 전달
IReadOnlyList<TItem>	렌더링할 데이터 리스트. 외부에서 전달받음

---

🧪 3. 사용하는 예제 - FetchData.razor

@page "/fetchdata"
@inject WeatherForecastService ForecastService
@using BlazorApp.Data

<h1>Weather forecast</h1>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <TableTemplate Items="forecasts" TItem="WeatherForecast">
        <Header>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
        </Header>
        <Row Context="forecast">
            <td>@forecast.Date.ToShortDateString()</td>
            <td>@forecast.TemperatureC</td>
            <td>@forecast.TemperatureF</td>
            <td>@forecast.Summary</td>
        </Row>
    </TableTemplate>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

🧠 작동 방식 해설:

1. Items="forecasts"

   • 데이터 리스트를 전달합니다.

2. TItem="WeatherForecast"

   • 해당 리스트가 어떤 타입인지 명시합니다. (TItem → WeatherForecast로 치환됨)

3. <Header>

   • <thead> 부분을 재사용 가능한 구조로 전달합니다.

4. <Row Context="forecast">

   • forecast는 TItem(WeatherForecast)의 인스턴스를 의미합니다.
   • 내부에서는 @Row(item) → <td>...</td> 형식으로 렌더링됨.

---

✅ 실전 팁

• Row에 <Row Context="x"> 형식으로 바인딩하여, 내부 @Row(x)와 연결됩니다.
• @typeparam을 선언하면 다양한 데이터 타입에도 재사용 가능한 컴포넌트를 만들 수 있습니다.
• 코드 중복 없이 다양한 목록 구조의 테이블을 효율적으로 관리할 수 있습니다.

---