[스터디] MVMM 패턴에 대한 설명과 사용법

저번 시간에 MVC 패턴과 MVP 패턴을 학습하였다. 이번 시간에는 MVMM 패턴에 대해서 학습해 보겠다.

 

 

 

먼저 MVVM이 뭐의 약자인지 알아보자. MVVM은 Model-View-ViewModel(VM)의 약자이다. MVC 패턴의 Controller와 MVP 패턴의 Presenter가 사라지고 ViewModel이라는 것이 생겼다.

 

1. Model

M-V-VM에서의 Model은 MVC 패턴과 MVP 패턴과 마찬가지로 데이터의 원본을 가지고 있는 역할이다.

 

2. View

MVVM에서의 View 역시 사용자에게 보여지고 입력을 받는 역할이다.

 

3. ViewModel

그렇다면 View Model은 무엇일까? ViewModel은 MVP에서의 Presenter와 같이 View와 Model의 연결다리 역할을 해준다.

마찬가지로 View와 Model이 서로 참조를 하지 않고도 ViewModel을 통해서 연결이 될 수 있다는 것이다. 그리고 ViewModel은 View와 바인딩 상태를 가진다. 따라서 ViewModel의 데이터가 변화하면 바인딩되었기 때문에 View의 데이터들도 그에 맞춰 변화한다. 이것이 MVP와는 다른 차이점이다. 즉, Model과 View사이의 데이터를 자동 동기화해주는 역할이라고 할 수 있다. 이로인해 UI 업데이트가 간편해지고 개발 시간을 단축시킬 수 있다.

 

그렇다면 MVVM 모델을 코드로 구현해보자!

// Model
public class PlayerModel
{
    private int _health;
    public int Health 
    { 
        get { return _health; }
        set { _health = value; }
    }
}

// View
public class PlayerView : MonoBehaviour
{
    [SerializeField] 
    private Text _healthText;
    private PlayerViewModel _viewModel;

    public void Bind(PlayerViewModel viewModel)
    {
        _viewModel = viewModel;
        _viewModel.HealthChanged += UpdateHealthText;
    }

    private void UpdateHealthText(int health)
    {
        _healthText.text = "Health: " + health.ToString();
    }

    public void OnDamageButtonClicked()
    {
        _viewModel.DamagePlayer();
    }
}

//View Model
public class PlayerViewModel
{
    private PlayerModel _model;
    public event Action<int> HealthChanged;

    public PlayerViewModel()
    {
        _model = new PlayerModel();
    }

    public int Health 
    { 
        get { return _model.Health; }
        set 
        { 
            _model.Health = value;
            HealthChanged?.Invoke(value);
        }
    }

    public void DamagePlayer()
    {
        Health--;
    }
}

 

위 코드에서 중요한 것은 ViewModel에 콜백변수를 두고 프로퍼티에서 Health가 Setter할 때 마다 콜백이 자동 발동되는데 이 때, 이 콜백에 View의 UI를 등록시킨다. 이렇게 구현하면 바인딩되어 UI가 자동업데이트 되는 것처럼 구현할 수 있다. 이러한 모양의 느낌이 MVVM의 구현이라고 보면 되겠다.

 

그런데 생각해보니 MVC에서도 이 것과 비슷하게 구현한 적이 있다. 바로 Model과 View의 관계였는데 Model의 변수를 프로퍼티로 구현해 놓고 Setter함수에 콜백 Invoke를 하고 이 콜백에 View의 UI를 등록시켜 놓았다. MVC에서는 Model이라는 원본에 View가 직접 접근하여 UI를 업데이트 했지만 MVVM에서는 원본에 접근하지 않고 ViewModel에 접근하여 UI를 업데이트 한다. 이것이 원본을 보존하고 좀 더 안전하게 코드를 짜는 방법이라고 볼 수 있겠다. 

 

즉, 요약하면 MVVM은 MVC와 MVP를 섞은 모습의 패턴이라고 볼 수 있겠다. MVC의 단점인 Model-View의 직접 참조를 개선하고 MVP의 단점인 View와 Presenter 사이의 높은 의존도를 끊어주는 모델이다. 

 

 

 

MVC 패턴, MVP 패턴, MVVM 패턴을 학습했다. 그렇다면 상황에 따라 어떤 패턴을 사용해야 할까?

 

각 패턴을 결합도에 따라서 분리한다면 MVC > MVP > MVVM 순으로 MVVM이 가장 결합도가 느슨하다. MVVM 쪽으로 갈 수록 설계 비용이 많이 든다는 뜻이다. 대신 결합도가 느슨하다는 것은 확장성과 유지 보수성이 높다는 뜻도 된다.

그렇기에 프로젝트의 규모가 크고 인원이 많을수록 MVVM이나 MVP를 선택하는 것이 좋은 방법이다.

 

 

https://programmingdev.com/unity-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-mvc-mvp-mvvm-%EB%B9%84%EA%B5%90-%EB%B0%8F-%EC%98%88%EC%8B%9C-%EC%BD%94%EB%93%9C/

[Unity] 디자인 패턴 MVC, MVP, MVVM 비교 및 예시 코드 - 달여행

https://parksh3641.tistory.com/entry/%EC%9C%A0%EB%8B%88%ED%8B%B0-MVVM-%ED%8C%A8%ED%84%B4-%EA%B0%84%EB%8B%A8-%EA%B5%AC%ED%98%84-%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4-%EB%94%94%EC%9E%90%EC%9D%B8

유니티 MVVM 패턴 간단 구현