연습 - 수명 주기 이벤트를 통해 앱 대화형 작업 향상 - Training

5분

피자 회사는 24인치 한 사이즈로만 제공되는 특별한 패밀리 사이즈의 피자를 판매하기로 결정했습니다. 현재 피자 앱에는 단일 사이즈 피자를 지원하지 않는 사이즈 슬라이더가 있습니다. 새 패밀리 사이즈 피자를 추가하고 해당 피자의 사이즈 옵션을 사용하지 않도록 설정하라는 요청을 받습니다.

이 연습에서는 피자 데이터베이스를 변경하여 패밀리 사이트 피자를 추가하고 새 피자를 지원하도록 피자 모델을 변경합니다. Blazor 구성 요소 수명 주기 이벤트를 처리하려면 고정 사이즈 사례를 처리하도록 피자 구성 대화 상자를 변경합니다.

새로운 패밀리 사이즈 피자 만들기

먼저 피자 모델에 새 FixedSize 기능을 추가하고 피자 데이터베이스에 새 패밀리 사이즈 피자를 만듭니다.

Visual Studio Code Explorer에서 Models를 확장하고 PizzaSpecial.cs를 선택합니다.
PizzaSpecial.cs 파일의 ImageUrl 속성 뒤에 다음 새 속성을 추가합니다.
```
public int? FixedSize { get; set; }
```
TestStatusBarCommand.cs 파일을 열고 GetBasePrice 메서드를 다음 코드로 바꿉니다.
```
public decimal GetBasePrice() =>
    Special is { FixedSize: not null }
        ? Special.BasePrice
        : (decimal)Size / DefaultSize * Special?.BasePrice ?? 1;
```
이 코드는 이제 BasePrice를 반환할 때 FixedSize를 포함하는 특수 항목을 고려합니다.
Data를 확장하고 SeedData.cs를 선택합니다.

SeedData.cs 파일에서 새 패밀리 사이즈 피자에 대한 다음 코드를 InitializeAsync 메서드의 specials 배열 선언 끝에 추가합니다.

new()
{
    Id = 9,
    Name = "Margherita Family Size",
    Description = "24\" of pure tomatoes and basil",
    BasePrice = 14.99m,
    ImageUrl = "img/pizzas/margherita.jpg",
    FixedSize = 24
}

SeedData 클래스는 피자 데이터베이스를 스페셜 피자로 미리 채웁니다. 새 PizzaSpecial을 만들려면 기존 데이터베이스를 삭제해야 합니다. Explorer에서 pizza.db, pizza.db-shm 및 pizza.db-wal 파일을 선택하고 삭제합니다.
Visual Studio Code에서 F5 키를 누르거나 실행>디버깅 시작을 선택합니다.
앱에서 새 Margherita Family Size 피자를 선택합니다.
주문 양식에서도 피자 사이즈를 변경할 수 있습니다.
Shift+F5를 누르거나 Run>디버깅 중지를 선택하여 앱을 중지합니다.

사이즈 슬라이더 제거

ConfigurePizzaDialog 구성 요소는 HTML range 요소를 사용하여 고객이 피자 사이즈를 선택할 수 있도록 합니다. 사용자 입력을 사용하지 않도록 설정하는 한 가지 방법은 사이즈 사용자 컨트롤의 렌더링을 모두 조건부로 생략하는 것입니다.

Visual Studio Code Explorer에서 Shared를 확장한 다음, ConfigurePizzaDialog.razor를 선택합니다.
@code 지시문의 기존 속성 뒤에 다음 멤버를 추가합니다.
```
bool supportSizing = true;

protected override void OnInitialized()
{
    if (Pizza is { Special.FixedSize: not null })
    {
        Pizza.Size = Pizza.Special.FixedSize.Value;
        supportSizing = false;
    }
}
```
supportSizing 필드는 기본적으로 true로 설정되지만 피자가 고정 사이즈인 경우 false로 설정됩니다. OnInitialized 수명 주기 메서드 재정의는 피자 사이즈를 고정 사이즈로 설정하고 크기 조정 지원을 사용하지 않도록 설정합니다.

참고

코드에서 JavaScript interop를 사용한 경우 OnInitialized 메서드 사용은 작동하지 않습니다. 대신 OnAfterRenderAsync 메서드를 사용하여 JavaScript interop을 사용할 수 있는지 확인해야 합니다.

<form class="dialog-body">에서 파일의 거의 맨 위에 있는 기존 label 및 input 줄을 다음 코드로 바꿉니다.

@if (supportSizing)
{
    <label>Size:</label>
    <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize"
        step="1" @bind="Pizza.Size" @bind:event="oninput" />
}

F5 키를 누르거나 실행>디버깅 시작을 선택합니다.
패밀리 사이즈 피자를 추가하고 렌더링에서 생략되어 사이즈 슬라이더가 사용하지 않도록 설정되었는지 확인합니다.
다른 피자를 주문하고 해당 피자의 사이즈 슬라이더를 계속 사용할 수 있는지 확인합니다.
Shift+F5를 누르거나 Run>디버깅 중지를 선택하여 앱을 중지합니다.

계속

연습 - 수명 주기 이벤트를 통해 앱 대화형 작업 향상

새로운 패밀리 사이즈 피자 만들기

사이즈 슬라이더 제거

피드백