MVVM 패턴

점차 프런트엔드 개발환경이 복잡해지고 거대해지면서 MVVM 같은 디자인 패턴 사용에 대한 니즈가 생겨나고 있습니다. 따라서 패턴대로 코드가 전개되고 수정에 열려있는 구조이기에 유지보수가 용이합니다.

MVVM 패턴

• 마틴 파울러의 Presentation 모델 패턴에서 파생된 디자인 패턴
• 목표는 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하는 것
• 분리하게 된다면 테스트, 유지 보수, 재사용이 쉬워진다.

 

구성 요소

1. 모델 (Model)
2. 뷰 (View)
3. 뷰 모델 (View Model)

• 이들 사이의 관계는 뷰는 뷰 모델을 알지만, 뷰 모델은 뷰를 알지 못한다. 뷰 모델 또한 모델은 알지만 모델은 뷰 모델을 알지 못한다.
• 이러한 구조로 뷰 모델과 모델이 뷰로부터 독립적인 형태가 되어 MVVM 패턴의 목적을 이룰 수 있게 되었다.

 

1. 뷰

• 뷰의 역할은 UI에 관련된 것을 다루는 것
• 사용자가 스크린을 통해서 보는 것들에 대한 구조, 레이아웃, 형태를 정의하는 것
• 애니메이션 같은 UI 로직을 포함하되 비즈니스 로직은 포함하지 않아야 한다.

2. 뷰 모델

• 뷰 모델의 역할은 뷰가 사용할 메서드와 필드를 구현, 뷰에게 상태 변화를 알리는 것
• 뷰 모델에서 제공하는 메서드와 필드가 UI에서 제공할 기능을 정의, 뷰가 이 기능을 어떻게 보여줄 것인지 결정
• 뷰 모델과 모델은 일대다 관계를 형성
• 뷰 모델은 뷰가 쉽게 사용할 수 있도록 모델의 데이터를 가공해서 뷰에게 제공 오직 뷰에서는 UI만 다루도록 한다.

3. 모델

• 모델은 비즈니스 로직과 유효성 검사와 데이터를 포함하는 도메인 모델
• 즉! 사용할 데이터에 관련된 행위와 데이터를 다룬다.

 

장점

• 뷰 모델이 뷰와 모델 사이의 어댑터로써 변경이 생겼을 때 변경을 최소화할 수 있다.
• 모델과 뷰 모델이 뷰로부터 독립적이다.
  • 뷰 모델과 모델을 플랫폼 독립적으로 개발할 수 있다.
  • 테스트하기 쉽다.
• 개발 기간 동안 개발자와 디자이너가 동시에 독립적으로 작업할 수 있다.
  • UI 디자인이 나오지 않았더라도 미리 정의된 모델과 뷰 모델을 먼저 개발할 수 있기 때문에 병렬적인 업무 프로세스가 가능하다.

단점

• 거대하고 복잡한 앱을 위해서 고안된 디자인 패턴이다. 따라서 작은 앱에서 사용하게 되면 오버헤드가 커진다.
• 앱이 너무 거대해지면 앱의 메모리 소모가 데이터 바인딩 때문에 커진다.

 

 

출처

• The Model-View-ViewModel Pattern
• Patterns - WPF Apps With The Model-View-ViewModel Design Pattern
• Presentation Model - 마틴 파울러
• Model–view–viewmodel - Wikipedia
• Reasons for using design patterns
• https://velog.io/@k7120792/Model-View-ViewModel-Pattern