[Prism] 007. MVVM 패턴의 이해, 데이터 바인딩 및 이벤트 처리

WPF(Windows Presentation Foundation)의 개발에서 MVVM(Model-View-ViewModel) 패턴은 매우 중요한 설계 패턴입니다. 이 패턴은 사용자 인터페이스(UI)와 비즈니스 논리를 분리하여 코드의 가독성과 재사용성을 높이는 데 기여합니다. 이번 글에서는 MVVM 패턴의 이해를 위한 여러 가지 측면을 살펴보고, 데이터 바인딩 및 이벤트 처리에 대한 세부 사항을 설명하겠습니다.

1. MVVM 패턴이란?

MVVM은 세 가지 주요 구성 요소로 구성됩니다: Model, View 및 ViewModel입니다. 각 구성 요소의 역할은 다음과 같습니다:

  • Model: 애플리케이션의 비즈니스 로직과 데이터 구조를 나타냅니다. Model은 데이터와 관련된 모든 작업을 담당하며, 데이터베이스와의 상호작용을 포함합니다.
  • View: 사용자에게 실제로 보이는 UI를 구성합니다. View는 사용자와 상호작용하며, ViewModel과 데이터 바인딩을 통해 데이터를 표시합니다.
  • ViewModel: View와 Model 간의 중재자 역할을 하며, UI의 상태와 행동을 나타내는 프로퍼티와 명령을 제공합니다. ViewModel은 Model로부터 데이터를 가져와서 형식화하고, View에 전달합니다.

2. MVVM의 이점

MVVM 패턴을 사용할 때의 주요 이점은 다음과 같습니다:

  • 유지보수성: UI와 비즈니스 로직이 분리되어 있어, 서로의 변경이 독립적으로 이루어질 수 있습니다.
  • 테스트 용이성: ViewModel은 UI와 독립적으로 동작할 수 있기 때문에, UI 테스트 없이도 유닛 테스트가 가능합니다.
  • 재사용성: ViewModel은 다양한 View에서 재사용할 수 있습니다.
  • 데이터 바인딩: 데이터 바인딩을 통해 View와 ViewModel 간의 빠르고 효율적인 데이터 동기화가 가능합니다.

3. 데이터 바인딩

데이터 바인딩은 WPF에서 MVVM 아키텍처의 핵심입니다. View가 ViewModel의 데이터를 표시하고 업데이트할 수 있도록 하는 메커니즘입니다. WPF는 여러 종류의 바인딩을 지원합니다:

3.1. 기본 데이터 바인딩

가장 기본적인 형태의 데이터 바인딩은 Simple Binding입니다. 다음은 ViewModel의 속성을 View에 바인딩하는 예입니다: 

<TextBox Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}" />

이 예제에서 `UserName` 속성은 ViewModel의 프로퍼티로, 텍스트 박스의 값이 변경될 때마다 ViewModel의 속성과 동기화됩니다.

3.2. One Way Binding

One Way Binding은 데이터가 ViewModel에서 View로 전달되는 방식입니다. 사용자가 UI에서 데이터를 수정하더라도 ViewModel에는 영향을 주지 않습니다. 예를 들어: 

<TextBlock Text="{Binding FullName}" />

3.3. Two Way Binding

Two Way Binding은 UI와 ViewModel 간의 양방향 데이터 흐름을 가능하게 합니다. 두 곳에서의 변경이 서로에게 영향을 미치는 경우입니다. 다음은 Two Way Binding의 예입니다: 

<TextBox Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

3.4. Command Binding

MVVM에서 액션(예: 버튼 클릭)을 처리하기 위해 Command를 사용합니다. Command는 ViewModel에서 정의되어, View와의 상호작용을 가능하게 합니다. 예를 들어, 버튼 클릭에 대한 Command는 다음과 같이 구현할 수 있습니다: 

<Button Content="Save" Command="{Binding SaveCommand}" />

4. 이벤트 처리

WPF에서 이벤트 처리는 MVVM 패턴에서 중요한 역할을 합니다. 하지만 MVVM에서는 별도의 이벤트 핸들러를 사용하기보다는 Command를 활용하는 것이 일반적입니다. Command를 사용하면 ViewModel에서 이벤트 로직을 쉽게 처리할 수 있습니다.

4.1. RelayCommand

Command를 구현하는 한 가지 방법은 RelayCommand입니다. RelayCommand는 ICommand 인터페이스를 구현하며, Action을 받아서 버튼 클릭과 같은 이벤트에 바인딩할 수 있습니다. 예를 들어: 

public class RelayCommand : ICommand
{
    private readonly Action<object> execute;
    private readonly Predicate<object> canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
    {
        this.execute = execute;
        this.canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return canExecute == null || canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        execute(parameter);
    }

    public void RaiseCanExecuteChanged()
    {
        CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    }
}

4.2. Command 사용 예

RelayCommand를 사용하여 버튼에 Command를 바인딩할 수 있습니다. ViewModel에서 Command를 정의한 후, View에 바인딩합니다: 

public class MyViewModel
{
    public ICommand SaveCommand { get; }

    public MyViewModel()
    {
        SaveCommand = new RelayCommand(OnSave);
    }

    private void OnSave(object parameter)
    {
        // Save logic
    }
}

그리고 View에서는 다음과 같이 Command를 바인딩합니다: 

<Button Content="Save" Command="{Binding SaveCommand}" />

5. 결론

MVVM 패턴은 WPF 개발에서 매우 중요한 개념으로, 데이터 바인딩과 Command를 활용하여 UI와 비즈니스 로직을 서로 분리해줍니다. 이 방식은 유지보수성과 테스트 용이성을 크게 향상시키며, 궁극적으로 더 나은 소프트웨어 개발을 가능하게 합니다. 이번 글에서 데이터 바인딩과 이벤트 처리를 통해 MVVM 패턴을 이해하고, 실제로 적용하는 방법에 대해 살펴보았습니다.