로직을 UI로부터 분리하는 MVVM Architecture Pattern

MVVM 패턴은 MVC 패턴과 마찬가지로 소프트웨어 아키텍처를 나타내는 패턴이다

MVC 패턴은 소프트웨어 아키텍처가 Mode-View-Controller로 분리됨으로써 유연하고 확장성 좋은 구조로 개발하기 용이해졌지만, 사용자에게 보여지는 실제 View에 대한 처리도 서버에서 부담해야 했다.

이러한 단점을 보완하여 사용자 인터페이스를 백엔드 로직에서 분리시킴으로써 뷰가 특정 플랫폼에 종속되지 않도록 개선한 모델이 MVVM 패턴이다.

Spring MVC로 개발을 할 경우, controller에서 view를 반환할 때 ViewResolver가 논리적 view name에 path 경로와 jsp 확장자를 연결하고 반환하여 플랫폼이 웹에 제한된다는 단점이 있었다.

이를 개선하여, 아예 View에 대한 처리를 View Model에게 인가하면 서버는 비즈니스 로직 처리만 하면 되므로 서비스 플랫폼에 독립적이게 된다.

 

하지만 MVVM 패턴은 그래픽 사용자 인터페이스(View)의 개발을 비즈니스 로직&백엔드 로직과 분리시킨다.

이 패턴의 목적은 뷰가 어느 특정 모델 플랫폼에 종속되지 않도록 하는 것 이다 ❗❗❗

 

MVVM 모델에서 새롭게 추가된 ViewModel은, 모든 뷰들의 디스플레이 로직을 제외한 대부분의 것 들을 처리한다.

• Model : 실제 상태 내용을 표현하기 위해, 도메인 모델을 참조하거나 내용을 표현하는 데이터 접근 계층을 참조한다
• View : MVC 패턴에서와 가이, 사용자가 화면에서 보는 것 들에 대한 구조·배치·외관에 해당한다
  • 모델을 보여서 표현하고 사용자와 뷰의 상호작용을 수신한다
  • 이에 대한 처리를 뷰와 뷰 모델의 연결(속성, 이벤트 콜백 함수 등의)을 정의하고 있는 데이터 바인딩을 통해 뷰 모델로 전달한다
• ViewModel : 공용 속성과, 공용 명령을 노출하는 뷰에 대한 추상화
  • MVC 패턴의 Controller, MVP 패턴의 Presenter를 대신하여 Binder를 가지고 있다(뷰 모델에 있는 뷰에 연결된 속성과 뷰 사이의 통신을 자동화)
  • View는 ViewModel의 속성에 직접 바인딩된 채로 업데이트를 주고 받는다
• Binder : 선언적인 데이터와 '명령-바인딩'이 내재되어 있다. 바인더는 뷰 모델과 뷰의 동기화를 위해 상용구 로직을 작성해야 하는 의무를 없애준다.

 

이러한 역할의 분리는 상호 작용을 설계하는 사람이 비즈니스 로직에 대한 프로그래밍 보다는 UX의 요구에 집중할 수 있도록 돕는다

결과적으로 응용 프로그램 계층별로 개발 흐름을 여러 개로 나누어, 생산성을 높일 수 있다

 

MVVM 패턴은 (데이터를 가능한 순수한 응용 프로그램 모델에 가깝게 바인딩하는)데이터 바인딩과 프레임워크의 장점을 활용함과 동시에, 기능 요소 개발을 분리한다.

결과적으로는 모델과 프레임워크가 가능한 많은 작업을 수행하며, 뷰를 직접 조작하는 응용 프로그램 로직은 최소화하거나 아예 없애버린다.

 

이처럼 MVVM 패턴은 View 플랫폼에 구애받지 않는 개발 방식을 지원하지만, 오히려 프로그램 규모가 너무 작거나 너무 크면 개발 부담 혹은 메모리에 대한 부담이 커질 수 있다.