UWP 개발, MVVM 프로그램 패턴

UWP(Universal Windows Platform)는 다양한 Windows 10 장치에서 실행될 수 있는 강력한 애플리케이션을 개발할 수 있는 플랫폼입니다. 애플리케이션의 구조를 체계적으로 구성하기 위해 MVVM(Model-View-ViewModel) 패턴이 널리 사용됩니다. MVVM은 코드의 유지 보수성을 높이고, 테스트 가능성을 높이며, UI와 비즈니스 로직의 분리를 촉진하는 구조적 패턴입니다.

MVVM 개요

MVVM는 세 가지 주요 구성 요소로 구성됩니다:

  • Model: 데이터 및 비즈니스 논리를 정의합니다. 데이터베이스나 웹 API와의 상호 작용을 처리합니다.
  • View: 사용자 인터페이스(UI)를 정의합니다. 사용자가 데이터를 시각적으로 보고 상호 작용하는 부분입니다.
  • ViewModel: View와 Model 사이의 중재자 역할을 합니다. View에서 발생한 이벤트나 명령을 처리하고, Model로부터 데이터를 받아 View에 알립니다.

MVVM 패턴의 장점

  • 유지 보수성: UI와 비즈니스 로직의 분리로 인해 각 구성요소를 독립적으로 수정 및 테스트할 수 있습니다.
  • 테스트 용이성: ViewModel을 독립적으로 테스트할 수 있어 단위 테스트가 용이합니다.
  • 데이터 바인딩: UWP에서는 XAML을 사용하여 View와 ViewModel 간의 데이터 바인딩을 간편하게 설정할 수 있습니다.

MVVM 구현하기

이제 UWP 애플리케이션에서 MVVM 패턴을 구현해 보겠습니다. 아래의 예제에서는 간단한 To-Do 리스트 애플리케이션을 만들어 보겠습니다.

1. Model

먼저 To-Do 항목을 나타내는 모델 클래스를 정의합니다.


public class TodoItem
{
    public string Title { get; set; }
    public bool IsCompleted { get; set; }
}

2. ViewModel

ViewModel은 UI와 Model 간의 상호 작용을 처리합니다.


using System.Collections.ObjectModel;
using System.ComponentModel;

public class TodoViewModel : INotifyPropertyChanged
{
    private string newTodoTitle;
    private ObservableCollection<TodoItem> todos;

    public event PropertyChangedEventHandler PropertyChanged;

    public TodoViewModel()
    {
        Todos = new ObservableCollection<TodoItem>();
    }

    public ObservableCollection<TodoItem> Todos
    {
        get { return todos; }
        set
        {
            todos = value;
            OnPropertyChanged("Todos");
        }
    }

    public string NewTodoTitle
    {
        get { return newTodoTitle; }
        set
        {
            newTodoTitle = value;
            OnPropertyChanged("NewTodoTitle");
        }
    }

    public void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(NewTodoTitle))
        {
            Todos.Add(new TodoItem { Title = NewTodoTitle, IsCompleted = false });
            NewTodoTitle = string.Empty; // Clear the input field
        }
    }

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3. View

XAML에서 View를 정의하고 ViewModel과 데이터 바인딩을 설정합니다.


<Page
    x:Class="YourApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourApp">

    <Page.DataContext>
        <local:TodoViewModel />
    </Page.DataContext>

    <StackPanel>
        <TextBox
            Text="{Binding NewTodoTitle, Mode=TwoWay}"
            PlaceholderText="Enter a new to-do item" />
        <Button
            Content="Add"
            Command="{Binding AddTodo}" />

        <ListView ItemsSource="{Binding Todos}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <CheckBox
                            IsChecked="{Binding IsCompleted}" />
                        <TextBlock Text="{Binding Title}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
</Page>

MVVM과 데이터 바인딩

UWP에서는 XAML을 사용하여 쉽게 데이터 바인딩을 구현할 수 있습니다. ViewModel의 속성을 View의 UI 요소에 직접 바인딩하여 UI가 자동으로 모델의 상태를 반영합니다. 이로 인해 추가적인 코드 없이도 Model과 View 간의 동기화가 가능해집니다.

결론

UWP에서 MVVM 패턴을 사용하는 것은 애플리케이션을 더 구조적으로 만들고 유지 보수를 용이하게 합니다. 이번 글에서는 간단한 To-Do 리스트 애플리케이션을 통해 MVVM 패턴을 구현하는 방법을 확인했습니다. MVVM 패턴을 제대로 활용하면, 애플리케이션의 복잡성을 줄이고, 코드의 재사용성을 높이며, 테스트를 더 효과적으로 수행할 수 있습니다.

앞으로 더 복잡한 UWP 애플리케이션을 개발할 때 MVVM 패턴을 잘 활용하여 안정적이고 유지보수가 쉬운 코드를 작성하시기 바랍니다!

참고 문헌