WPF의 MVVM 패턴

WPF에서 MVVM(Model-View-ViewModel) 패턴은 코드와 UI를 명확히 분리하고 유지보수를 용이하게 하는 핵심 디자인 패턴으로 주로 사용한다.

• View는 ViewModel을 알지만 ViewModel은 View를 알지 못한다.
• ViewModel은 Model을 알지만 Model은 ViewModel을 알지 못한다.

---

MVVM 패턴

MVVM은 WPF와 같은 데이터 바인딩 프레임워크에 최적화된 디자인 패턴으로, M(Model), V(View), VM(ViewModel)에 대하여 알아보자.

1. Model

   • 애플리케이션의 데이터와 비즈니스 로직을 포함
   • 데이터베이스나 API와 같은 데이터 소스와 직접 통신
   • 일반적으로 POCO(Plain Old CLR Object) 형태로 작성

2. View

   • 사용자 인터페이스(UI)를 담당
   • XAML 파일로 정의되며, 화면에 표시되는 모든 시각적 요소를 포함
   • View는 사용자와 상호작용하지만, 로직이 포함되지 않는다.

3. ViewModel

   • View와 Model 사이의 중간 다리 역할
   • View에 표시할 데이터를 제공하고, 사용자 상호작용을 처리하여 Model로 전달
   • 데이터 바인딩과 명령을 통해 View와 상호작용

MVVM의 장점

• 유지보수성: UI와 로직이 분리되어 있어 변경 사항을 쉽게 관리할 수 있다.
• 재사용성: ViewModel은 다양한 View에서 재사용할 수 있다.
• 테스트 가능성: ViewModel이 독립적이므로 단위 테스트가 용이하다.

---

ViewModelBase.cs

ViewModelBase.cs

ViewModelBase에 대하여 Script를 작성해보자

public abstract class ViewModelBase : INotifyPropertyChanged
{
	// INotifyPropertyChanged의 요소
    public event PropertyChangedEventHandler PropertyChanged;
    
    // 속성값이 변화될 때 이 메서드를 '직접' 호출해줘야 한다.
    private void NotifyPropertyChanged(string propertyName)
    {
        // PropertyChanged에 등록된 메서드들을 Invoke 해준다.
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

더 간단한 ViewModelBase

public abstract class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    
    protected void NotifyPropertyChanged([CallerMemberName]string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    
    // 파생 클래스의 속성 setter에서 사용할 메서드
    protected virtual bool SetProperty<T>(ref T member, T value, [CallerMemberName]string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(member, value)) return false;
        
        member = value;
        NotifyPropertyChanged(propertyName);
        return true;
    }
}

참고

• [WPF] MVVM 디자인 패턴 (1)
• [WPF] MVVM 디자인 패턴 (2)
• [WPF] MVVM 디자인 패턴 (3)
• WPF MVVM 패턴, 그리고 Binding
• 괴발자 데브봉님 블로그