MVVM 패턴

JJW·2024년 11월 28일

.Unity

Unity

목록 보기

6/34

UI 개발에 자주 사용되는 디자인 패턴인 MVC, MVP, MVVM 중 MVVM 패턴에 대해 알아보겠습니다.
총 3개의 글로 정리 될 예정이며 이 글은 마지막 글입니다.

MVC, MVP 패턴 보러가기 (Link)

MVC : MVC
MVP : MVP

MVVM

MVVM 은 Model, View, ViewModel의 약자입니다.

MVVM 방식은 MVC 방식의 아래 글과 같은 단점을 보완하여 개발 된 디자인 패턴입니다.

MVC 단점

View와 Controller 간의 강한 결합

View의 로직 처리

MVVM 패턴의 MVC 패턴 단점 보완 내용

View와 ViewModel을 데이터 바인딩으로 연결하여 결합을 느슨하게 만듭니다

ViewModel이 View의 상태와 로직을 관리하도록 설계하여 View를 더 단순하게 만듭니다

MVVM 패턴의 핵심

데이터 바인딩과 단방향/양방향 데이터 흐름

View와 ViewModel 간의 결합을 줄이고 테스트 가능성을 높임

1.M (Model)

데이터와 비즈니스 로직을 담당합니다

데이터베이스나 API와 상호작용하며, ViewModel에 데이터를 제공합니다

public class PlayerModel
{
    public string PlayerName { get; set; }
    public int Score { get; set; }
}

2. V (View)

사용자 인터페이스(UI)를 담당합니다

ViewModel과 데이터를 바인딩하고, 사용자 입력 이벤트를 전달합니다

public class PlayerView : MonoBehaviour
{
    public Text playerNameText;
    public Text scoreText;

    private PlayerViewModel _viewModel;

    public void Bind(PlayerViewModel viewModel)
    {
        _viewModel = viewModel;

        // 이벤트 구독
        _viewModel.OnPlayerNameChanged += UpdatePlayerName;
        _viewModel.OnScoreChanged += UpdateScore;

        // 초기 값 설정
        UpdatePlayerName(_viewModel.PlayerName);
        UpdateScore(_viewModel.Score);
    }

    private void UpdatePlayerName(string playerName)
    {
        playerNameText.text = playerName;
    }

    private void UpdateScore(int score)
    {
        scoreText.text = score.ToString();
    }
	
    public void OnChangedPlayerName(string playerName)
    {
    	_viewModel.PlayerName = playerName;
    }
    
    public void OnAddScore(int score)
    {
    	_viewModel.Score += score;
    }
    
    private void OnDestroy()
    {
        // 이벤트 구독 해제 (메모리 누수 방지)
        if (_viewModel != null)
        {
            _viewModel.OnPlayerNameChanged -= UpdatePlayerName;
            _viewModel.OnScoreChanged -= UpdateScore;
        }
    }
}

3. VM (ViewModel)

View와 Model 간의 중간 역할을 합니다

View에서 사용되는 데이터를 준비하고 로직을 실행하며, View와 데이터를 동기화합니다

INotifyPropertyChanged 인터페이스를 통해 데이터 바인딩을 지원합니다 (Unity 에서는 Action으로도 사용 가능)

public class PlayerViewModel
{
    private PlayerModel _playerModel;

    // 이벤트 선언
    public event Action<string> OnPlayerNameChanged;
    public event Action<int> OnScoreChanged;

    public PlayerViewModel(PlayerModel playerModel)
    {
        _playerModel = playerModel;
    }

    public string PlayerName
    {
        get => _playerModel.PlayerName;
        set
        {
            if (_playerModel.PlayerName != value)
            {
                _playerModel.PlayerName = value;
                OnPlayerNameChanged?.Invoke(value); // 변경 알림
            }
        }
    }

    public int Score
    {
        get => _playerModel.Score;
        set
        {
            if (_playerModel.Score != value)
            {
                _playerModel.Score = value;
                OnScoreChanged?.Invoke(value); // 변경 알림
            }
        }
    }
}

MVVM의 작동 흐름

사용자 입력

ViewModel 업데이트

Model 갱신

View 업데이트

위 코드 기준 예시로 든다면

OnAddScore(),OnChangedPlayerName() : 사용자 입력

PlayerName,Score get,set : ViewModel 업데이트

_playerModel.PlayerName, _playerModel.Score : Model 갱신

OnPlayerNameChanged?.Invoke(value),OnScoreChanged?.Invoke(value) : View 업데이트

MVVM의 장단점

장점
- 유지보수 용이
  - UI(View)와 로직(ViewModel, Model)이 분리되어 코드 수정이 쉽습니다
- 테스트 가능성
  - ViewModel은 UI와 독립적이므로 단위 테스트 작성이 쉽습니다
- 재사용성
  - ViewModel은 특정 UI에 종속되지 않아 다양한 View에서 재사용 가능합니다
단점
- 복잡성 증가
  - 단순한 프로젝트에서는 필요 이상으로 복잡해질 수 있습니다
- 초기 학습 비용
  - 패턴을 이해하고 설계하는 데 시간이 필요합니다

MVVM과 MVC,MVP의 다른점

Model의 기능이 달라집니다.
MVC,MVP의 경우 데이터와 로직이 포함되있는 반면에 MVVM의 경우 순수 데이터만 포함이 되어있습니다.
View의 경우에는 동일한 역할을 가지고 있습니다.
ViewModel의 경우 Model의 데이터를 가공하여 사용하고 UI와 독립적으로 동작합니다.
Controller의 경우 양방향으로 연결되며 Model의 변수를 직접 참조하여 사용합니다.
Presenter의 경우 단방향으로 연결되며 View에서 호출을 받은 경우 Model의 변수를 참조하여 사용합니다.

정리

패턴	Model	View	중간역할	주요 차이점
MVC	데이터와 로직 포함	UI와 입력 처리 로직 포함	Controller	View와 Controller가 강하게 결합될 수 있음
MVP	데이터와 로직 포함	UI와 입력 처리 로직 포함	Presenter	View는 Presenter와 연결되며, 대부분 수동적인 연결 필요
MVVM	데이터만 포함	UI와 입력 처리 로직 포함	ViewModel	ViewModel이 데이터를 가공하고, UI와 독립적으로 동작

테스트

MVVM의 작동 흐름에서 설명한 것처럼 작동 흐름이 같습니다.

느낀 점

오히려 MVP 패턴보다는 Model에서부터 차이가 느껴졌기 때문에 덜 헷갈렸습니다.
패턴에 익숙해지면 정말 유용하게 쓰일 것 같다는 생각이 들었으며 아직 단순한 기능 구현이라 이렇게 느낀지는 모르겠지만.. UI 개발에 있어서 단순한 건 MVC 복잡한 건 MVVM 을 사용하지 않을까 싶습니다.. MVC,MVP,MVVM 공부하면서 그동안 UI를 개발을 어수룩하게 했다고 느끼고 있습니다..