template component

BlazorApp/BlazorApp.sln

@@ -3,7 +3,7 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.7.34009.444
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorApp", "BlazorApp\BlazorApp.csproj", "{BA9BA38B-CE57-4F78-9A34-0389609342A6}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorApp", "BlazorApp\BlazorApp.csproj", "{BA9BA38B-CE57-4F78-9A34-0389609342A6}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

BlazorApp/BlazorApp/Pages/FetchData.razor

@@ -15,27 +15,20 @@
 }
 else
 {
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th>Temp. (C)</th>
-                <th>Temp. (F)</th>
-                <th>Summary</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var forecast in forecasts)
-            {
-                <tr>
-                    <td>@forecast.Date.ToShortDateString()</td>
-                    <td>@forecast.TemperatureC</td>
-                    <td>@forecast.TemperatureF</td>
-                    <td>@forecast.Summary</td>
-                </tr>
-            }
-        </tbody>
-    </table>
+    <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 {

BlazorApp/BlazorApp/Pages/TableTemplate.razor

@@ -0,0 +1,33 @@
+@using BlazorApp.Data;
+
+@typeparam TItem
+
+@* Template component *@
+@* Render fragment로 이루어진 Razor component *@
+
+<table class="table">
+    <thead>
+        <tr>
+            @this.Header
+        </tr>
+    </thead>
+    <tbody>
+        @foreach (var item in this.Items)
+        {
+            <tr>
+                @this.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; }
+}