[ArchitecturePattern] #MVC #MVP #MVVM (1)

Model과 View

  • Model
    보통 data 그 자체와 동일시 되지만, 이외의 데이터를 조작할 수 있는 기능이 추가되기도 한다. 구현과 상황에 따라서는 단순히 data source에 접근하는 DAO 역할을 하거나, 파일 시스템 자체가 되거나, 라이브러리 세트가 된다.
  • View
    사용자에게 제공되는 UI Layer. 보통 Web Application 등에서는 View는 HTML/CSS로 렌더링된 화면을 가르킨다.
  • MVC를 비롯한 여러 프레임워크들이 나온 이유는 명확하다. 각 계층의 분리로 재활용성을 높이고 중복을 막자는 것이다. 이 둘의 의존성을 어떻게 제어하느냐에 따라 MVC, MVP, MVVM등으로 나뉘게 된다.

Controller, Presenter, ViewModel ???

  • Controller
    모든 입력은 Controller에서 처리한다. 특정 입력이 들어오면 Controller는 그 입력에 해당하는 Model을 선택하여 처리하게 한다. Controller는 입력에 따라 Model을 업데이트 하고, 결과에 따른 View를 선택한다. Controller는 View를 선택할 수 있기 때문에 여러 개의 View를 관리할 수 있다.일반적으로 View는 Model을 사용하여 업데이트를 하지만, Model을 관리하는 것은 Controller 이므로 사실상 View는 Model을 직접적으로 생성하거나 관리하는 것은 아니다.Controller는 Model을 조적하고 View를 선택하지만 View를 직접 업데이트 하지는 않는다.
    이 경우에는 View와 Model의 관계가 어느정도 있으며, 이 MVC의 문제점은 View와 Model의 의존성을 피할 수가 없다는 것이다. MVC의 좋은 구성은 이둘의 의존성을 낮추는 게 관건이라 할 수 있다.
  • Presenter : View와 Model 사이의 상호작용
    입력처리 담당은 View이다.View가 Event를 Presenter에 전달하면, Event에 맞춰 Presenter는 Model을 조작하고 그 결과를 다시 View에 바인딩하여 View의 요소들이 업데이트 된다.Controller는 단순히 View를 선택하고 Model을 조작한 뒤 실제 화면 갱신은 View와 Model의 상호작용으로 이루어지지만 Presenter를 사용한 MVP에서는 Presenter가 Model을 조작하고 관리하며 변경이 있으면 Model에 따라 View를 업데이트하게 된다.

    View와 Presenter는 1:1 관계로 맺어지며 Presenter는 보통 Model보다는 View에 더 닮은 구조로 디자인된다. MVC와는 다르게 View와 Model의 관계가 전혀 없어지므로 View와 Model의 의존관계가 완전히 사라진다.

     

  • ViewModel : View의 표현을 담당한다
    MVP와 매우 비슷하지만 큰 차이점이라면 비중이 View에 조금 더 치우쳐 있다는 점이다. Presenter는 View에 상당한 의존성이 있었지만, ViewModel은 View와 아무런 관련이 없다.여러 View들은 하나의 ViewModel을 선택하여 바인딩하고 업데이트를 받는다.ViewModel의 디자인은 View보다는 Model에 비슷하게 구성된다. 보통 ViewModel이 변경되면 자동으로 View에 업데이트되는 방식으로 구현된다. ViewModel은 View를 위한 모든 customizing을 제공하는 Model이다.

MVC 패턴은 Web Application에서 다루어보아서 무슨 말인지 이해가 된다. 특히 MVC에서 View와 Model의 의존성 문제에 대해서는 공감한다. 설명만으로는 MVP와 MVVM 패턴을 완전히 이해하기는 어려운 것 같다. 다음번에 이 두 패턴에 관해서 적당한 예시를 들어서 공부하고  포스팅해야 겠다.

참고
1. MVC, MVP and MVVM
2. MVC, MVP, MVVM 의 이해
3. MVVM 패턴에 대해서

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s