MVVM 아키텍처_extJs

MVVM 아키텍처

 

MVC를 대체하기 위해 만들어진 아키텍처

MVC패턴의 경우 뷰와 컨트롤러가 N:N 구조로 만들어지다 보면 전체적인 구조가 복잡하게 얽히게 되는데, 

이러한 문제를 개선하기 위해 모델과 컨트롤러를 뷰에 종속적인 구조로 구성한 뷰 기준의 아키텍처 이다.

따라서 뷰가 종료되면 뷰컨트롤러와 뷰모델은 같이 사라지게 된다.

 

MVC와 MVVM의 가장 핵심적인 차이점은 MVVM에서 뷰 모델(ViewModel)이라고 불리는 뷰의 추상화를 지원한다는 점이다. 뷰 모델은 "데이터 바인딩(data binding)"이라는 기술을 사용해서 모델의 데이터와 뷰가 그리는 화면상의 데이터의 변경을 중재한다.

 

      

출처 : https://www.sencha.com/blog/ext-js-5-mvc-mvvm-and-more/

 

용어의 구체적인 설명은 다음과 같다.

(M) Model - 어플리케이션에서 사용되는 데이터를 담당한다. "Models"라고 불리는 데이터 집합으로 필드와 데이터로 정의된다. 예를 들어 User 모델은 user-name과 password 필드를 갖는다. 모델은 데이터 패키지를 통해 데이터에 대한 추적을 유지하고 결합(associations)을 통해 다른 모델들과 연결된다. 모델은 일반적으로 그리드 또는 다른 컴포넌트에 데이터를 제공하기 위한 스토어(Store)와 결합하여 사용되며, 또한 validation, conversion 기타 등등 데이터를 취급하다보면 필요할 수 있는 모든 데이터 로직의 이상적인 장소라고 할 수 있다.   (V) View - 뷰는 화면에 그려지는 비주얼에 관련된 모든 컴포넌트라고 할 수 있다. 그리드, 트리, 패널 등 화면에 나타나는 모든 것을 뷰라고 생각하면 된다.   (C) Controller - 어플리케이션이 작동하기 위해 필요한 뷰 로직을 관리한다. 이에 따라 뷰를 랜더링 하고, 라우팅하거나 모델 인스턴스를 생성하거나 또는 다른 어플리케이션 로직 일부를 수행토록 한다.   (VM) ViewModel - 뷰 모델은 뷰로 제공되는 데이터를 특정하여 관리하기 위한 클래스로서 컴포넌트가 바인딩을 처리하거나 데이터 변경에 따라 업데이트 되도록 하는 역할을 담당한다. 이러한 어플리케이션 아키텍처는 코드의 구조화 및 일관성을 부여한다.

 

MVVM아키텍처는 뷰와 뷰모델의 데이터바인딩이 핵심이다. 데이터바인딩을 간단하게 설명하면, 일종의 동기화 개념이다.

View의 데이터를 ViewModel에서 추상화 하고 있다, 즉 모델부분의 로직들은 뷰모델에서 관리할 수 있다는 것이고,

이를 뷰 중심으로 개별적으로 관리가 가능하다는 장점이 있다.

MVVM는 ViewController가 제공된다. 

ViewController은 기존의 MVC Controller와 비슷하지만

전역적으로 모든 뷰를 관리하지 않고 View를 개별적으로 관리한다.

View ViewModel VIewController는 한 묶음이라고 생각하면 이해하기 편하다.

View중심이며, 연관된 View가사라지면 ViewModel과 ViewController도 뒤이어 사라진다.

기존의 MVC객체는 컨트롤러가 모든 뷰를 전역적으로 관리하다보니 관련로직이 쏠리게되어

규모가 커질경우 스파게티소스가 되기 쉬웠지만 MVVM은 이를 개별적으로 관리함으로써 

이를 해결하고, 가독성을 높이는 장점이 있고 이로써 단위테스트를 하기 수월해 진다.