[C#] .Net MAUI 사칙 연산 계산기 만들기

.Net MAUI 정의

.Net MAUI는 Multi-plafform App UI (다중 플랫폼 앱  UI)의 약자이며, 마이크로소프트에서 개발한 크로스 플랫폼 프레임워크이다. .Net MAUI의 가장 큰 장점은, 단일 코드로 Android, iOS, macOS 및 Windows에서 실행 가능하다는 것이다.

 

Microsoft .Net MAUI 설명

 

.Net MAUI 특징

.Net MAUI는 다음과 같은 특징을 갖고 있다. 

1. 한 번의 코드 작성으로 모바일 (iOS, Android), 데스크톱 (Windows, MacOS)에서 실행 가능하다.

2. 하나의 프로젝트에서 모든 플랫폼을 관리할 수 있으며, 플랫폼별 코드를 따로 작성할 필요가 없다.

3. Hot Reload를 지원한다. Hot Reload란, 앱이 실행중에 코드를 수정하더라도, 빌드하지 않고 실시간으로 반영 가능하다는 것이다.

4. 기존의 MVVM (Model-View-ViewModel)뿐만 아니라, MVU (Model-View-Update) 패턴도 지원한다. 

5. Blazor Hybrid를 지원하며, 이를 통해 웹과 네이티브 UI 를 통합할 수 있다.

 

.Net MAUI 사칙 연산 계산기 

.Net MAUI를 활용하여 사칙 연산 계산기를 만들 수 있다.

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp3.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <!--기본 제공 이미지-->
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a race car number eight" />

            <!--사칙 연산 계산기 UI 추가 시작-->
            <Label Text="사칙연산 계산기" FontSize="24" HorizontalOptions="Center"/>

            <Entry x:Name="EntryNumber1" Placeholder="첫 번째 숫자 입력" Keyboard="Numeric"/>
            <Entry x:Name="EntryNumber2" Placeholder="두 번째 숫자 입력" Keyboard="Numeric"/>

            <Picker x:Name="OperatorPicker">
                <Picker.Items>
                    <x:String>+</x:String>
                    <x:String>-</x:String>
                    <x:String>*</x:String>
                    <x:String>/</x:String>
                </Picker.Items>
            </Picker>

            <Button Text="계산" Clicked="OnCalculateClicked"/>

            <Label x:Name="ResultLabel" Text="결과: " FontSize="20" HorizontalOptions="Center"/>
            <!--사칙 연산 계산기 UI 추가 종료-->
           
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

 

MainPage.xaml은 UI를 구성하는 코드를 작성하는 부분이다. 각각의 요소가 설명하는 바는 다음과 같다.

XAML 요소	설명
<ContentPage>	현재 페이지에서 전체 레이아웃을 정의
<VerticalStackLayout>	요소들을 세로로 정렬하는 레이아웃
<Label>	텍스트를 표시하는 요소 (사칙연산 계산기, 결과)
<Entry>	숫자 입력란
x:Name	추후에 MainPage.xaml.cs와 연결되기 위한 이름 (컨트롤명)
<Picker>	사칙연산 (+,-,*,/) 을 선택하는 드롭다운 메뉴
<Button>	계산버튼. 추후에 MainPage.xaml.cs의 OnCalculateClicked 이벤트와 연결된다.
<Label>	계산 결과를 출력한다. MainPage.xaml.cs와 ResultLabel 이름으로 연결된다.

 

MainPage.xaml.cs

MainPage.xaml.cs는 실제 동작이 이루어지는 부분이다. UI에서 할당된 값과 이벤트 이름을 받아온다.

namespace MauiApp3
{
    public partial class MainPage : ContentPage //xaml과 연결된 코드 비하인드 클래스
    {
        int count = 0;

        public MainPage()
        {
            InitializeComponent();
        }
        
        private void OnCalculateClicked(object sender, EventArgs e) //계산 버튼 클릭시 실행되는 이벤트
        {
            double num1, num2, result = 0;

            if (!double.TryParse(EntryNumber1.Text, out num1) ||
                !double.TryParse(EntryNumber2.Text, out num2)) //xaml에서 받아오는 숫자 2개. 입력값
            {
                ResultLabel.Text = "유효한 숫자를 입력하세요.";
                return;
            }

            string op = OperatorPicker.SelectedItem as string;

            switch (op) //사칙연산 수행 구문
            {
                case "+":
                    result = num1 + num2;
                    break;
                case "-":
                    result = num1 - num2;
                    break;
                case "*":
                    result = num1 * num2;
                    break;
                case "/":
                    if (num2 == 0)
                    {
                        ResultLabel.Text = "0으로 나눌 수 없습니다.";
                        return;
                    }
                    result = num1 / num2;
                    break;
                default:
                    ResultLabel.Text = "연산자를 선택하세요.";
                    return;
            }

            ResultLabel.Text = $"결과: {result}"; //결과값 전달
        }
    }

}

 

.Net MAUI 사칙연산 계산기 실행 결과

.Net MAUI 사칙연산 계산기 실행 결과 (Android Emulator)

 

코드 수행시 정상적으로 사칙연산이 수행됨을 확인할 수 있다.

 

.Net MAUI 사칙연산 계산기 초기화면 (Windows Macine)

 

.Net MAUI의 장점은 앞서 설명했듯이, 단일 코드로 여러 플랫폼에 구현 가능하다는 것이다. 위 이미지는 Windows Machine으로 디버깅을 했을 때 결과다.