[Prism] 006. MVVM 패턴의 이해, 모델, 뷰, 뷰모델의 역할

작성자: 블로거 이름 | 날짜: YYYY-MM-DD

MVVM 패턴의 개요

MVVM(Model-View-ViewModel) 패턴은 WPF(Windows Presentation Foundation)와 같은 UI 프레임워크에서 사용되는 디자인 패턴으로,
애플리케이션의 유지 보수성과 재사용성을 높이는 데 기여합니다.
MVVM 패턴은 세 가지 주요 구성 요소인 모델(Model), 뷰(View), 뷰모델(ViewModel)로 나눌 수 있습니다.

이 패턴의 주된 목적은 사용자 인터페이스의 비즈니스 로직과 데이터를 분리하여,
UI와 비즈니스 로직을 최고의 유연성과 테스트 가능성을 가진 상태로 유지할 수 있는 것입니다.

모델(Model)의 역할

모델은 애플리케이션의 데이터 구조와 비즈니스 로직을 정의하는 부분입니다.
데이터에 대한 CRUD(Create, Read, Update, Delete) 작업과 관련된 모든 로직을 포함하고 있습니다.
모델은 일반적으로 데이터베이스와 연결되는 데이터 액세스 계층을 포함하며,
비즈니스 규칙이나 데이터 유효성 검증 등의 책임도 가집니다.

모델은 UI에 대한 지식이 없어야 하며, 오직 비즈니스 로직에만 집중해야 합니다.
예를 들어, 고객 정보를 관리하는 모델 클래스를 정의할 수 있습니다.


public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    
    public void Save()
    {
        // 데이터베이스에 고객 정보를 저장하는 로직
    }

    public void Validate()
    {
        // 고객 정보를 검증하는 로직
    }
}

위의 예시는 고객 정보를 저장하고 검증하는 기본적인 모델 클래스를 보여줍니다.
모델은 데이터에 관한 모든 세부정보와 비즈니스 규칙을 포함합니다.

뷰(View)의 역할

뷰는 사용자 인터페이스의 시각적 표현을 담당합니다.
WPF에서는 XAML(Extensible Application Markup Language)을 사용하여 UI를 정의합니다.
뷰는 데이터나 비즈니스 로직과의 직접적인 상호작용을 피하고,
대신 뷰모델을 통해 데이터를 바인딩하여 UI를 업데이트합니다.

뷰는 사용자의 입력을 받아 들이고, 이를 뷰모델에게 전달하게 됩니다.
이러한 방식은 뷰와 비즈니스 로직을 분리하여, 코드의 재사용성을 높이고, 단위 테스트를 용이하게 만듭니다.

위의 XAML 코드 찬 부분은 고객의 이름을 입력할 수 있는 텍스트 박스와 저장 버튼이 있는 기본적인 UI 레이아웃을 보여줍니다.
이는 뷰모델에 바인딩되어 사용자 상호작용을 지원합니다.

뷰모델(ViewModel)의 역할

뷰모델은 모델과 뷰 사이의 중재자 역할을 수행합니다.
데이터와 비즈니스 로직을 바인딩하여 뷰가 데이터를 표시하고 사용자 입력을 처리할 수 있도록 도와줍니다.

뷰모델에서는 ICommand 인터페이스를 구현하여 UI가 호출할 수 있는 메서드를 제공합니다.
이러한 메서드는 일반적으로 뷰와 바인딩되어 사용자 상호작용을 처리합니다.
뷰모델은 모델에 대한 직접적인 참조를 가지고 있으며, 모델에서 데이터를 가져오고, 변화를 반영할 수 있는 역할을 수행합니다.


public class CustomerViewModel : INotifyPropertyChanged
{
    private Customer _customer;
    
    public CustomerViewModel()
    {
        _customer = new Customer();
        SaveCommand = new RelayCommand(SaveCustomer);
    }

    public string Name
    {
        get => _customer.Name;
        set
        {
            _customer.Name = value;
            OnPropertyChanged(nameof(Name));
        }
    }

    public ICommand SaveCommand { get; }

    private void SaveCustomer()
    {
        _customer.Save();
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

위 예시는 고객 정보를 처리하는 뷰모델 클래스를 보여줍니다.
뷰모델은 모델의 속성을 바인딩하고 저장 명령을 구현하여 UI와의 상호작용을 관리합니다.

MVVM의 이점

MVVM 패턴은 다음과 같은 여러 가지 이점을 제공합니다:

비즈니스 로직 분리: 비즈니스 로직과 UI를 분리하여 각 부분의 독립성을 보장합니다.
테스트 용이성: 뷰모델은 모델 및 뷰와 독립적으로 테스트할 수 있어 단위 테스트가 용이합니다.
유지보수성: 코드 변경 시 영향을 받는 부분이 최소화되어 유지보수가 쉽습니다.
재사용성: 뷰모델을 다른 뷰와 함께 재사용할 수 있어 개발 시간을 단축합니다.