[Blaozr] 기본 문법 정리

참고

• https://blog.juho.kim/posts/2021-07-04_Blazor-Workshop/
• https://github.com/dotnet-presentations/blazor-workshop

개요

• Blazor 공부에 앞서, 사전에 미리 알고 있으면 좋은 개념들에 대해서 정리 진행합니다.

@page directive

@page "/counter"

• @page directive에 의해 웹브라우저가 /counter 페이지를 요청하였을 때 해당 컴포넌트가 페이지에 그려집니다.

@onclick

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

• 버튼을 클릭하였을 때 @onclick 에 연결된 IncrementCount 메서드가 실행됩니다.

[Parameter]

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

<Counter IncrementAmount="10" />

• Component의 Parameter 를 구성하고 싶을 경우 Parameter Attribute 로 꾸민 public 속성을 작성합니다.

@code

@code {
  List<PizzaSpecial> specials;
}

• @code 안의 코드들은 컴포넌트 생성을 위한 클래스에 더해집니다.

@inject

@inject HttpClient HttpClient

• 작성된 컴포넌트에 HttpClient 타입 인스턴스를 프로퍼티로 주입합니다.
• 프로퍼티 생성은 별도의 Dependency Injection(DI) 를 사용해 주어야 합니다.

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("#app");
    builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    await builder.Build().RunAsync();
}

OnInitializedAsync

• @code 안의 OnInitializedAsync 메서드를 오버라이드하여 컴포넌트 라이프사이클 코드를 작성할 수 있습니다.

@code {
    List<PizzaSpecial> specials;

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>("specials");
    }
}

Layout

• 레이아웃도 블레이저 컴포넌트이며, Body 프로퍼티를 가지는 LayoutComponetBase 를 상속(@inherits) 합니다.

@inherits LayoutComponentBase

<div class="content">
    @Body
</div>

Router

• 기본 템플릿에는 App.razor 에서 Router 컴포넌트가 최상위로 감싸고 있습니다.
• RouterView 컴포넌트의 DefaultLayout Parameter 가 MainLayout 으로 되어 있기 떄문에 별도로 layout 을 적용하지 않으면 기본 레이아웃이 적용됩니다.
• 다른 레이아웃을 적용하려면 페이지 컴포넌트에 @layout SomeOtherLayout 처럼 layout directive 를 사용합니다.

<Router AppAssembly="typeof(Program).Assembly" Context="routeData">
    <Found>
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <div class="main">Sorry, there's nothing at this address.</div>
        </LayoutView>
    </NotFound>
</Router>

NavLink

• Blazor 에 의해 제공되는 컴포넌트로, anchor 태그와 다를 것은 없으나 현재 URL과 일치하는 지에 따라 active 클래스가 활성화 됩니다.
• NavLinkMatch.All 은 전체 URL이 일치할 때에만 active 되는 것을 의미합니다.

<NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
        <img src="img/pizza-slice.svg" />
        <div>Get Pizza</div>
</NavLink>