UWP 개발, 뷰와 뷰모델이 합쳐진 코드 비하인드 이해하기

UWP 개발: 뷰와 뷰모델이 합쳐진 코드 비하인드 이해하기

UWP(Universal Windows Platform) 개발은 Microsoft의 다양한 디바이스에서 실행될 수 있는 애플리케이션을 구축할 수 있는 강력한 플랫폼입니다. MVVM(모델-뷰-뷰모델) 아키텍처는 UWP 애플리케이션을 개발할 때 광범위하게 사용되며, UWP의 뷰(View)와 뷰모델(ViewModel) 간의 상호작용을 이해하는 것이 매우 중요합니다.

1. MVVM 아키텍처 이해하기

MVVM은 UWP 애플리케이션에서 구현되는 디자인 패턴으로, 애플리케이션의 구조를 명확하게 정의하고, 코드를 잘 분리하여 유지 관리와 테스트를 용이하게 하도록 설계되었습니다. MVVM은 주로 다음과 같은 세 가지 구성 요소로 이루어져 있습니다:

  • 모델(Model): 애플리케이션의 데이터 및 비즈니스 로직을 포함합니다.
  • 뷰(View): 사용자 인터페이스(UI)를 나타내고, 사용자와 상호작용합니다.
  • 뷰모델(ViewModel): 뷰와 모델 사이의 중재 역할을 하며, 뷰에 필요한 데이터를 준비하고, 사용자 행동을 처리합니다.

이 디자인 패턴을 통해 코드의 재사용성을 높이고, UI와 비즈니스 로직의 분리를 통해 더욱 효율적인 애플리케이션 개발이 가능해 집니다.

2. UWP에서 뷰와 뷰모델의 결합

UWP에서는 XAML을 사용하여 뷰를 정의하고, 백엔드에서는 C#을 사용하여 뷰모델을 구현합니다. 뷰와 뷰모델은 데이터 바인딩을 통해 연결됩니다. 데이터 바인딩을 통해 뷰는 뷰모델의 속성을 실시간으로 관찰할 수 있으며, 뷰에서 발생하는 이벤트(예: 버튼 클릭)는 뷰모델에 전달되어 적절한 로직을 수행하게 됩니다.

2.1. 데이터 바인딩 특징

UWP의 데이터 바인딩은 다음과 같은 특징을 가지고 있습니다:

  1. 데이터 컨텍스트: 뷰의 DataContext 속성을 사용하여 뷰모델 인스턴스를 할당합니다.
  2. 속성 변경 알림: INotifyPropertyChanged 인터페이스를 구현함으로써 속성이 변경될 때 UI에 이를 알릴 수 있습니다.
  3. 명령: ICommand 인터페이스를 사용하여 뷰에서 발생하는 이벤트를 뷰모델에 명령으로 전달할 수 있습니다.

2.2. 예제 코드

그럼 다음 예제를 통해 UWP 애플리케이션에서 뷰와 뷰모델의 결합을 살펴보겠습니다.

 
// Model
public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

// ViewModel
using System.ComponentModel;

public class PersonViewModel : INotifyPropertyChanged
{
    private Person person;
    
    public PersonViewModel()
    {
        Person = new Person { Name = "John Doe", Age = 30 };
    }

    public Person Person
    {
        get => person;
        set
        {
            person = value;
            OnPropertyChanged(nameof(Person));
        }
    }

    public string DisplayName => $"{Person.Name}, {Person.Age}세";

    public event PropertyChangedEventHandler PropertyChanged;

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

3. 뷰모델에서 뷰로의 데이터 전달

이제 뷰모델에서 데이터를 바인딩하여 뷰에서 이를 업데이트하는 방법을 살펴보겠습니다. 버튼 클릭 시 뷰모델의 속성을 변경하는 간단한 로직을 추가해 보겠습니다.

 
// MainPage.xaml.cs
private PersonViewModel viewModel;

public MainPage()
{
    this.InitializeComponent();
    viewModel = new PersonViewModel();
    this.DataContext = viewModel;
}

private void OnChangeNameClicked(object sender, RoutedEventArgs e)
{
    viewModel.Person.Name = "Jane Doe"; // 이름 변경
    viewModel.OnPropertyChanged(nameof(viewModel.DisplayName)); // DisplayName 업데이트
}

4. 결론

이제 UWP에서 뷰와 뷰모델 간의 통합 및 데이터 흐름을 이해했습니다. MVVM 아키텍처를 통해 코드의 유지 보수성을 높이고, UI와 애플리케이션 로직을 명확하게 분리할 수 있습니다. 이 글에서는 기본적인 예제를 통해 뷰와 뷰모델 간의 상호작용을 설명했습니다. 이러한 기초를 바탕으로 더 복잡한 애플리케이션을 구축할 수 있습니다.

앞으로 UWP 개발에 대한 더 많은 정보를 제공할 예정이니, 많은 관심 부탁드립니다!