Design Pattern - MVVM

MVP 패턴을 통해, MVC 패턴의 한계점인 View와 Model 사이의 의존성은 해결되었지만, View와 Presenter 사이에 강한 의존성을 지니게 된다는 단점이 발생했다. 이러한 단점을 보완하기 위해 View Model을 도입한 MVVM 패턴이 등장하게 되었다. MVC 패턴 및 MVP 패턴과 마찬가지로 Model과 View를 동일하게 가지지만, Presenter가 아닌 View Model을 사용한다는 차이점이 있다.

• Model은 MVC 패턴과 MVP 패턴에서와 마찬가지로, 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분이다.
• View 역시 MVC 패턴과 MVP 패턴에서와 동일하게, 사용자에게 보여지는 UI 부분이다.
• View Model은 View를 표현해주는 View를 위한 Model이다. 오직 View를 나타내기 위한 데이터 처리를 하며, 오직 View 에게 맞춰진 Model을 제공해주는 역할을 한다.

MVVM 패턴은 Command 패턴과 Data Binding 두 가지 기법을 사용하여 구현되었다.

• Command 패턴: 커맨드 패턴이란 객체의 행위, 즉 메서드를 클래스로 만들어 캡슐화함으로써 주어진 기능을 실행 가능한 재사용성이 높은 클래스를 설계하는 패턴이다. 이벤트가 발생했을 때 실행될 기능이 다양하면서 변경이 필요할 경우, 이벤트를 발생시키는 클래스를 변경 없이 재사용할 때 유용하다.

• Data Binding(데이터 연결): 데이터 바인딩은 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다. 현재 많은 자바스크립트 프레임워크가 이러한 데이터 바인딩 기술을 제공하고 있으며, 대다수의 자바스크립트 프레임워크가 단방향 데이터 바인딩을 지원하고 있다. (반면 AngularJS는 양방향 데이터 바인딩을 제공한다.)