Templated Component

1. Templated

템플릿은 C++의 템플릿과 동일한 의미를 지닌다. C#으로 치면 제네릭형식이다.

List<string> test;

 

그리고 Templated는 RenderFragment로 이루어진 Razor Component이다.

이 말이 어려우니 일단 예시로 살펴보자.

 

2. 사용예시

FetchData.razor

@page "/fetchdata"

@using BlazorApp.Data
@inject WeatherForecastService ForecastService 

@*Templated Component*@
@* RenderFragment로 이루어진 Razor Component*@
<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@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);
    }
}

 

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; }
}

FetchData.razor에서 템플릿 컴포넌트를 사용하는 상황이다.

 

그 중에서 FetchData.razor에서 if~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);
    }
}

    <TableTemplate Items="forecasts" TItem="WeatherForecast">을 살펴보면 items는 @code 부분의 forecasts를 가져왔고 TItem은 forecasts와 자료형이 일치해야하므로 WeatherForecast를 넣어주었다.

 

 

<Header></Header>로 감싸진 부분은 TableTemplate.razor에서 @Header로 작성된 부분으로 들어가서 코드가 작동하게 된다. 그리고 @Header는 RenderFragment의 자료형으로 정의되어있다.

 

<Row Context='forecast"></Row>로 감싸진 부분은 조금 더 복잡한데  우선 Context는 TableTemplate.razor에서 TItem의 자료형식을 forecast라는 이름으로 가져온다. 그리고 foreach문을 이용하여 순차적으로 데이터를 삽입해준다.

 

조금 복잡할 수 있어도 제네릭처럼 치환을 해준다고 생각하면 이해하기 편하다.