Blazor 애플리케이션에서 데이터 공유
Blazor에는 구성 요소 간에 정보를 공유하는 여러 가지 방법이 포함되어 있습니다. 구성 요소 매개 변수 또는 연계 매개 변수를 사용하여 부모 구성 요소에서 자식 구성 요소로 값을 보낼 수 있습니다. AppState 패턴은 값을 저장하고 애플리케이션의 모든 구성 요소에서 액세스하는 데 사용할 수 있는 또 다른 방법입니다.
새 피자 배달 웹 사이트에서 작업 중이라고 가정합니다. 홈페이지에서 여러 피자를 동일한 방식으로 표시해야 합니다. 각 피자에 대해 자식 구성 요소를 렌더링하여 피자를 표시하려고 합니다. 이제 표시할 피자를 결정하는 해당 자식 구성 요소에 ID를 전달하려고 합니다. 또한 여러 구성 요소에 오늘 판매한 총 피자 수를 표시하는 값을 저장하고 표시하려고 합니다.
이 단원에서는 둘 이상의 Blazor 구성 요소 간에 값을 공유하는 데 사용할 수 있는 세 가지 기술을 알아봅니다.
구성 요소 매개 변수를 사용하여 다른 구성 요소와 정보 공유
Blazor 웹앱에서 각 구성 요소는 HTML의 일부를 렌더링합니다. 일부 구성 요소는 전체 페이지를 렌더링하지만 다른 구성 요소는 테이블, 양식 또는 단일 컨트롤과 같은 더 작은 태그 조각을 렌더링합니다. 구성 요소가 태그의 일부만 렌더링하는 경우 이를 부모 구성 요소 내에서 자식 구성 요소로 사용해야 합니다. 자식 구성 요소는 그 안에 렌더링되는 다른 작은 구성 요소의 부모일 수도 있습니다. 자식 구성 요소를 중첩된 구성 요소라고도 합니다.
이 부모 및 자식 구성 요소 계층 구조에서는 구성 요소 매개 변수를 사용하여 구성 요소 간에 정보를 공유할 수 있습니다. 자식 구성 요소에서 이러한 매개 변수를 정의한 다음, 부모 구성 요소에서 해당 값을 설정합니다. 예를 들어 피자 사진을 표시하는 자식 구성 요소가 있는 경우 구성 요소 매개 변수를 사용하여 피자 ID를 전달할 수 있습니다. 자식 구성 요소는 ID에서 피자를 검색하고 사진 및 기타 데이터를 얻습니다. 다양한 피자를 표시하려는 경우 동일한 부모 페이지에서 이 자식 구성 요소를 여러 번 사용하여 각 자식에 다른 ID를 전달할 수 있습니다.
자식 구성 요소에서 구성 요소 매개 변수를 정의하는 것으로 시작합니다. C# 공용 속성으로 정의되고 [Parameter] 특성으로 데코레이트됩니다.
<h2>New Pizza: @PizzaName</h2>
<p>@PizzaDescription</p>
@code {
[Parameter]
public string PizzaName { get; set; }
[Parameter]
public string PizzaDescription { get; set; } = "The best pizza you've ever tasted."
}
구성 요소 매개 변수는 자식 구성 요소의 멤버이므로 Blazor의 예약된 @ 기호 및 해당 이름을 사용하여 HTML에서 렌더링할 수 있습니다. 또한 앞의 코드는 PizzaDescription 매개 변수의 기본값을 지정합니다. 부모 구성 요소가 값을 전달하지 않으면 이 값이 렌더링됩니다. 아니면 부모로부터 전달된 값으로 재정의됩니다.
프로젝트에서 사용자 지정 클래스를 구성 요소 매개 변수로 사용할 수도 있습니다. 토핑을 설명하는 다음 클래스를 생각해 보겠습니다.
public class PizzaTopping
{
public string Name { get; set; }
public string Ingredients { get; set; }
}
점 구문을 사용하여 클래스의 개별 속성에 액세스하는 매개 변수 값과 동일한 방식으로 이를 구성 요소 매개 변수로 사용할 수 있습니다.
<h2>New Topping: @Topping.Name</h2>
<p>Ingredients: @Topping.Ingredients</p>
@code {
[Parameter]
public PizzaTopping Topping { get; set; }
}
부모 구성 요소에서 자식 구성 요소 태그의 특성을 사용하여 매개 변수 값을 설정합니다. 간단한 구성 요소를 직접 설정합니다. 사용자 지정 클래스를 기반으로 하는 매개 변수를 사용하여 인라인 C# 코드로 해당 클래스의 새 인스턴스를 만들고 해당 값을 설정합니다.
@page "/pizzas-toppings"
<h1>Our Latest Pizzas and Topping</h1>
<Pizza PizzaName="Hawaiian" PizzaDescription="The one with pineapple" />
<PizzaTopping Topping="@(new PizzaTopping() { Name = "Chilli Sauce", Ingredients = "Three kinds of chilli." })" />
연계 매개 변수를 사용하여 정보 공유
구성 요소 매개 변수는 구성 요소의 직계 자식에 값을 전달하려는 경우에 잘 작동합니다. 자식의 자식이 있는 심층 계층 구조가 있는 경우 상황이 어려워집니다. 구성 요소 매개 변수는 상위 구성 요소에서 손자 구성 요소 또는 계층 구조의 하위 구성 요소로 자동으로 전달되지 않습니다. 이 문제를 자연스럽게 처리하기 위해 Blazor에는 연계 매개 변수가 포함되어 있습니다. 구성 요소에서 연계 매개 변수의 값을 설정하면 모든 깊이의 모든 하위 구성 요소에서 해당 값을 자동으로 사용할 수 있습니다.
부모 구성 요소에서 <CascadingValue> 태그를 사용하면 모든 하위 항목에 계단식으로 배열할 정보가 지정됩니다. 이 태그는 기본 제공 Blazor 구성 요소로 구현됩니다. 해당 태그 내에서 렌더링되는 모든 구성 요소는 값에 액세스할 수 있습니다.
@page "/specialoffers"
<h1>Special Offers</h1>
<CascadingValue Name="DealName" Value="Throwback Thursday">
<!-- Any descendant component rendered here will be able to access the cascading value. -->
</CascadingValue>
하위 구성 요소에서 구성 요소 멤버를 사용하고 [CascadingParameter] 특성으로 데코레이트하여 연계 값에 액세스할 수 있습니다.
<h2>Deal: @DealName</h2>
@code {
[CascadingParameter(Name="DealName")]
private string DealName { get; set; }
}
따라서 이 예제에서 <h2> 태그는 상위 구성 요소에 의해 연계 값이 설정되었기 때문에 Deal: Throwback Thursday 콘텐츠를 갖습니다.
참고
구성 요소 매개 변수에서는 더 복잡한 요구 사항이 있는 경우 개체를 연계 매개 변수로 전달할 수 있습니다.
앞의 예제에서 연계 값은 부모의 Name 특성으로 식별되며 [CascadingParameter] 특성의 Name 값과 일치됩니다. 필요에 따라 이러한 이름을 생략할 수 있습니다. 이 경우 특성은 형식을 기준으로 일치됩니다. 이름을 누락하는 방법은 해당 형식의 매개 변수가 하나만 있는 경우에 잘 작동합니다. 서로 다른 두 문자열 값을 계단식으로 배열하려면 매개 변수 이름을 사용하여 모호성을 방지해야 합니다.
AppState를 사용하여 정보 공유
다른 구성 요소 간에 정보를 공유하는 또 다른 방법은 AppState 패턴을 사용하는 것입니다. 저장하려는 속성을 정의하고 범위가 지정된 서비스로 등록하는 클래스를 만듭니다. AppState 값을 설정 또는 사용하려는 모든 구성 요소에서 서비스를 삽입한 다음 해당 속성에 액세스할 수 있습니다. 구성 요소 매개 변수 및 연계 매개 변수와 달리 AppState의 값은 해당 값을 저장한 구성 요소의 자식이 아닌 구성 요소까지 포함하여 애플리케이션의 모든 구성 요소에서 사용할 수 있습니다.
예를 들어 매출에 대한 값을 저장하는 이 클래스를 사용하는 것이 좋습니다.
public class PizzaSalesState
{
public int PizzasSoldToday { get; set; }
}
Program.cs 파일에서 클래스를 범위가 지정된 서비스로 추가합니다.
...
// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Add the AppState class
builder.Services.AddScoped<PizzaSalesState>();
...
이제 AppState 값을 설정하거나 검색하려는 구성 요소에서 클래스를 삽입한 다음 속성에 액세스할 수 있습니다.
@page "/"
@inject PizzaSalesState SalesState
<h1>Welcome to Blazing Pizzas</h1>
<p>Today, we've sold this many pizzas: @SalesState.PizzasSoldToday</p>
<button @onclick="IncrementSales">Buy a Pizza</button>
@code {
private void IncrementSales()
{
SalesState.PizzasSoldToday++;
}
}
참고
이 코드는 Blazor 자습서 - 첫 번째 Blazor 앱 빌드 예제와 마찬가지로 사용자가 단추를 선택할 때 증가하는 카운터를 구현합니다. 차이점은 이 경우 카운터의 값을 AppState 범위가 지정된 서비스에 저장했으므로 페이지 로드 간에 횟수가 유지되고 다른 사용자가 볼 수 있다는 것입니다.
다음 단원에서는 직접 시도해 볼 수 있습니다.