[Web] 템플릿 컴포넌트

모든 타입에 대해 재사용성을 높이고 편리하게 출력하기 위해 컴포넌트 자체를 템플릿으로 선언하여 사용할 수있습니다. 본 글에서는 데이터를 보여줄 테이블을 템플릿을 구현하였습니다.

· TableTemplate

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

[Parameter]
public RenderFragment Header { get; set; }

• 테이블의 Header을 사용하기위해 사용합니다.
• 이 템플릿을 사용할 때 <Header> 영역에 선언되는 변수들이 사용되게 됩니다.

 

<tr>
    @Header
</tr>

• 위 Header 변수를 출력합니다.
• 각 요소들을 직접 출력해야했지만, RenderFragment변수에서 단순히 @Header만 하면 모든 요소가 출력되게 됩니다.

 

@typeparam TItem

...

[Parameter]
public RenderFragment<TItem> Row { get; set; }

[Parameter]
public IReadOnlyList<TItem> Items { get; set; }

• 템플릿 TItem에 해당하는 값을 출력하도록 해줍니다.
• TItem이라는 파라미터 타입을 템플릿으로 사용한다고 선언해야합니다.
• Items는 리스트로서 역할을 합니다.

 

@foreach (var item in Items)
{
    <tr>
        @Row(item)
    </tr>
}

• TItem가 들어간 리스트를 출력합니다.

 

· FetchData

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

<PageTitle>Weather forecast</PageTitle>

<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(DateOnly.FromDateTime(DateTime.Now));
	}
}

<TableTemplate Items="forecasts" TItem="WeatherForecast">

• 테이블템플릿을 컴포넌트로 불러옵니다.
• 내부 변수인 Items는 forecasts라는 리스트로, 템플릿인 TItem의 타입은 WeatherForecast라고 알려줍니다.

 

<Header>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</Header>

• 템플릿 컴포넌트의 Header에 해당하는 변수를 설정합니다.
• 각 요소가 테이블의 헤더에 출력되게 됩니다.

 

<Row Context="forecast">
    <td>@forecast.Date.ToShortDateString()</td>
    <td>@forecast.TemperatureC</td>
    <td>@forecast.TemperatureF</td>
    <td>@forecast.Summary</td>
</Row>

• Row에서 출력될 값들을 알려줍니다.
• TableTemplate.razor에서 Row(item)에서 item을 현재 쓴 HTML과 같이 출력하도록 합니다.