BlazorBindings.Maui ์†Œ๊ฐœ

์žฌ๋ฏธ๋‚œ ์‹คํ—˜์„ ํ•˜๊ณ  ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์†Œ๊ฐœ ํ•ฉ๋‹ˆ๋‹ค.

MAUI ํ™”๋ฉด์„ razor ๊ตฌ๋ฌธ ์Šคํƒ€์ผ๋กœ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ง์ ‘ ์‹คํ–‰ํ•ด๋ณด์ง€๋Š” ์•Š์•˜์ง€๋งŒ ๊ด€๋ จ ๋ฌธ์„œ๋„ ์ œ๊ณตํ•˜๊ณ  ๊ฐœ์ธ์ ์œผ๋กœ razor ๊ตฌ๋ฌธ ์Šคํƒ€์ผ์„ ๋” ์ข‹์•„ํ•ด์„œ ๊ฐ’ ๋ณ€ํ™”์— ๋”ฐ๋ฅธ ํ™”๋ฉด ๋ Œ๋”๋ง์ด XAML ์Šคํƒ€์ผ์— ๋น„ํ•ด ๋‚˜์˜์ง€ ์•Š๋‹ค๋ฉด ์‚ดํŽด๋ณผ ํ•„์š”๊ฐ€ ์žˆ๋Š” ํ”„๋กœ์ ํŠธ ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

4๊ฐœ์˜ ์ข‹์•„์š”

์ด ํ”„๋กœ์ ํŠธ๋Š” Microsoft์˜ ์•„๋ž˜์˜ ์‹คํ—˜์šฉ ๋ชจ๋ฐ”์ผ Blazor ๋ฐ”์ธ๋”ฉ์˜ ํฌํฌ์ž…๋‹ˆ๋‹ค.

1๊ฐœ์˜ ์ข‹์•„์š”

๋ฌธ์„œ๋ฅผ ์ด์šฉํ•ด ํ”„๋กœ์ ํŠธ ํ…œํ”Œ๋ฆฟ์„ ์„ค์น˜ํ•œ ํ›„ ๊ธฐ๋ณธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•ด์„œ ์‹คํ–‰ํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

razor๋กœ ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๊ณ 

image

๋‹ค์Œ์ฒ˜๋Ÿผ ์ž˜ ์‹คํ–‰์ด ๋ฉ๋‹ˆ๋‹ค.

razor์˜ ์žฅ์ ์€ xaml๋ฅผ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ํ™”๋ฉด ๊ด€๋ จ ์ฝ”๋“œ๋ฅผ ์ง€์–‘ํ•˜๊ฒŒ ๋˜๋Š” ๋ฐฉํ–ฅ์„ฑ์—์„œ
razor๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ํ™”๋ฉด ๊ตฌ์„ฑ๊ณผ ํ™”๋ฉด ๊ด€๋ จ ์ฝ”๋“œ๋ฅผ ๊ฒฐํ•ฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋ฐ”์ธ๋”ฉ์˜ ๋™์ž‘์ด ์ข€ ๋” ์ง๊ด€์ ์ด์ฃ .

StateHasChanged()๋ฅผ ๊ทธ๋Œ€๋กœ ์“ธ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์•„ ๋ Œ๋”๋ง ํŠธ๋ฆฌ๋„ Blazor์˜ ๊ทธ๊ฒƒ๊ณผ ๊ฐ™์ด ๋™์ผํ•˜๊ฒŒ ๊ตฌ์„ฑํ•˜์—ฌ ๋™์ž‘ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

2๊ฐœ์˜ ์ข‹์•„์š”

๋ช‡๊ฐ€์ง€ ๋™์ž‘์„ ํ™•์ธํ–ˆ๋Š”๋ฐ ๊ธฐ๋ณธ ํ…œํ”Œ๋ฆฟ ๊ธฐ๋ฐ˜์œผ๋กœ๋Š” ์ž˜ ๋™์ž‘์„ ํ•˜๋„ค์š”.

@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;
    }
}

2๊ฐœ์˜ ์ข‹์•„์š”

์ €๋„ ์กฐ๊ธˆ ์‚ดํŽด ๋ดค๋Š”๋ฐ html์— ์ต์ˆ™ํ•˜์ง€ ์•Š์œผ์‹  ๋ถ„๋“ค์€
blazor hybrid ๋ณด๋‹ค mobile blazor binding์ด ๋‚˜์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.~~

3๊ฐœ์˜ ์ข‹์•„์š”

๋‹ค๋ฅธ๊ฑด ํฐ ํ—ˆ๋“ค์ด ์—†๋Š”๋ฐ Attached Property(์—ฐ๊ฒฐ๋œ ์†์„ฑ)๊ฐ€ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. Blazor์™€ Razor์—๋Š” Attached Property๊ฐ€ ์—†๊ฑฐ๋“ ์š”. ๊ทธ๋ž˜์„œ ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ๋Š” Attached Property๋ฅผ Blazor์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ํ•„์š”ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ (Grid์™€ Grid ์ž์‹ ๋“ฑ)์—์„œ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. (์ฆ‰, ์‚ฌ์šฉ์ž ํ™•์žฅ์€ ์•ˆ๋ฉ๋‹ˆ๋‹คโ€ฆ ๊ทธ๋ ‡์ฃ ?)

์กฐ๊ธˆ ๋” ์‚ดํŽด๋ดค๋”๋‹ˆ ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” Blazor ๋ Œ๋”๋ง ์‹œ์Šคํ…œ์„ ๊ทธ๋ƒฅ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ๋ Œ๋”๋ง์— ์‚ฌ์šฉํ•œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ MAUI๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด์ฃ . ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•ด์„œ ๋ Œ๋” ํŠธ๋ฆฌ๋ฅผ ๊ฐฑ์‹ ํ•˜๋Š” ๊ธฐ์กด Blazor ๋ Œ๋”๋ง ์‹œ์Šคํ…œ์€ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉ์ด ๋ฉ๋‹ˆ๋‹ค. ๋งค๋ ฅ์ ์ด๊ตฐ์š” +_+ ๋˜‘๊ฐ™์€ ๊ฐœ๋…์œผ๋กœ MAUI ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ Avalonia๋‚˜ Uno๋„ Razor ๊ตฌ๋ฌธ ์Šคํƒ€์ผ๋กœ ํ™•์žฅํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. (๋‹ค๋งŒ, ์ด๋Ÿฐ ์‹คํ—˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ์„ฑ๊ณตํ•˜๋ ค๋ฉด razor ์Šคํƒ€์ผ ์†Œ๋น„์ž๊ฐ€ ๋งŽ์•„์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ด ๋ฌธ์ œ๊ตฐ์š”)

3๊ฐœ์˜ ์ข‹์•„์š”