BlazorBindings.Maui 소개

dimohy · 10월 4, 2022, 11:58오전

재미난 실험을 하고 있는 프로젝트를 소개 합니다.

MAUI 화면을 razor 구문 스타일로 만들어서 사용할 수 있습니다. 직접 실행해보지는 않았지만 관련 문서도 제공하고 개인적으로 razor 구문 스타일을 더 좋아해서 값 변화에 따른 화면 렌더링이 XAML 스타일에 비해 나쁘지 않다면 살펴볼 필요가 있는 프로젝트 인 것 같습니다.

dimohy · 10월 5, 2022, 7:12오전

이 프로젝트는 Microsoft의 아래의 실험용 모바일 Blazor 바인딩의 포크입니다.

dimohy · 10월 5, 2022, 7:29오전

문서를 이용해 프로젝트 템플릿을 설치한 후 기본 프로젝트를 생성해서 실행해보았습니다.

razor로 페이지를 구성하는 것을 확인할 수 있고

다음처럼 잘 실행이 됩니다.

razor의 장점은 xaml를 사용했을 때 불필요하게 화면 관련 코드를 지양하게 되는 방향성에서
razor를 사용하면 자연스럽게 화면 구성과 화면 관련 코드를 결합할 수 있게 됩니다.

그리고 바인딩의 동작이 좀 더 직관적이죠.

StateHasChanged()를 그대로 쓸 수 있는 것으로 보아 렌더링 트리도 Blazor의 그것과 같이 동일하게 구성하여 동작할 것 같습니다.

dimohy · 10월 5, 2022, 8:01오전

몇가지 동작을 확인했는데 기본 템플릿 기반으로는 잘 동작을 하네요.

@page "/main"

<ContentPage>
    <ScrollView>
        <VerticalStackLayout Spacing="25"
                             Padding="new(30,0)"
                             VerticalOptions="LayoutOptions.Center">

            @if (count % 2 is 0)
            {
                <Image Source="dotNetBotSource"
                   HeightRequest="200"
                   HorizontalOptions="LayoutOptions.Center" Opacity="opacity" />
            }

            <Label Text="Hello, World!"
                   FontSize="32"
                   HorizontalOptions="LayoutOptions.Center" />

            <Label Text="Welcome to .NET Multi-platform App UI"
                   FontSize="18"
                   HorizontalOptions="LayoutOptions.Center" />

            <Button Text="@ButtonText"
                    HorizontalOptions="LayoutOptions.Center"
                    OnClick="OnCounterClicked" />

            <Label HorizontalOptions="LayoutOptions.Center">== "@ButtonText" == </Label>

            <Entry HorizontalOptions="LayoutOptions.Center" @bind-Text="inputText" />

            <Label HorizontalOptions="LayoutOptions.Center">== "@inputText" == </Label>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

@code {
    ImageSource dotNetBotSource = ImageSource.FromFile("dotnet_bot.png");

    int count = 0;
    double opacity = 1.0d;
    string inputText = "default text";

    string ButtonText => count switch
    {
        0 => "Click me",
        1 => $"Clicked 1 time",
        _ => $"Clicked {count} times"
    };

    void OnCounterClicked()
    {
        count++;

        opacity -= 0.1;
    }
}

_jeonghwan · 10월 5, 2022, 4:57오후

저도 조금 살펴 봤는데 html에 익숙하지 않으신 분들은
blazor hybrid 보다 mobile blazor binding이 나을 것 같습니다.~~

dimohy · 10월 6, 2022, 4:50오후

다른건 큰 허들이 없는데 Attached Property(연결된 속성)가 문제입니다. Blazor와 Razor에는 Attached Property가 없거든요. 그래서 이 라이브러리에서는 Attached Property를 Blazor의 매개변수를 필요하는 컴포넌트 (Grid와 Grid 자식 등)에서 처리합니다. (즉, 사용자 확장은 안됩니다… 그렇죠?)

조금 더 살펴봤더니 이 라이브러리는 Blazor 렌더링 시스템을 그냥 사용합니다. 다만, 렌더링에 사용한는 컴포넌트를 MAUI를 사용하는 것이죠. 그러니까 변화를 감지해서 렌더 트리를 갱신하는 기존 Blazor 렌더링 시스템은 그대로 사용이 됩니다. 매력적이군요 +_+ 똑같은 개념으로 MAUI 뿐만 아니라 Avalonia나 Uno도 Razor 구문 스타일로 확장할 수 있을 것 같습니다. (다만, 이런 실험 프로젝트가 성공하려면 razor 스타일 소비자가 많아야 한다는 것이 문제군요)