[웹(앱)/Android]MVVM 패턴이란~

* 참고 링크 스프링 mvc 패턴 설명 - http://sky17777.tistory.com/34?category=830528 안드로이드 mvp 패턴 정리 - http://sky17777.tistory.com/35?category=830528

이번 포스팅의 내용은 안드로이드 mvvm패턴의 기본 개념에 대해서 알아보겠습니다.

안드로이드에서 사용하는 디자인 패턴은 스프링과 같은 MVC 패턴과 MVP 패턴, MVVM 패턴이 있습니다.

MVVM(Model-View-ViewModel) 패턴이란??

MVVM(Model-View-ViewModel) 패턴은 마이크로소프트의 WPF(Window Presentation Foundation)와 실버라이트 개발에서 고안된 패턴입니다.

MVVM패턴은 스프링 MVC패턴과 MVP패턴과 비슷그리하지만 "바인딩 추상층"객체가 추가되어 있습니다.

바인딩 추상층은 우리가 만드는 부분이 아니라 라이브러리 개발자가 완성해서 배포하는 부분입니다.

따라서 뷰와 뷰모델 사이의 연관성이 줄어듭니다.

모델(Model)

모델은 데이터와 관련된 모든 기능을 수행하는 객체입니다. mvc나 mvp 패턴의 모델과 같은 기능이구요~

뷰(View)

뷰는 화면과 관련된 모든 기능을 수행하는 객체입니다. mvc나 mvp 패턴의 뷰와 비슷한 기능입니다.

뷰모델(ViewModel)

뷰를 추상화한 객체로 모델에서 어떤 데이터를 처리하고 뷰에서 어떠한 방식으로 보여줄지를 결정합니다.

MVC 패턴의 컨트롤러나 MVP 패턴의 프리젠터와 비슷한 기능입니다.

바인더 추상층(Binder)

추상화되어 있는 뷰모델을 뷰에 반영하는 역할을 합니다.

바로 라이브러리 개발자가 완성한 부분이죠~

MVC 패턴의 뷰와 컨트롤러의 기능을 바인더 추상층이 모두 수행합니다.

예제코드를 보며 알아보기

simple 템플릿으로 만든 html 파일 코드는 다음과 같습니다. 아래파일은 html과 javascript 코드로 구성되어 있는 하나의 파일입니다.(블록 구별을 위해 

쉽게 나누어서 설명함)

  
  


  

    
    
``
  

위에서 데이터(모델)가 변경되면 뷰모델 객체는 즉시 html 요소(뷰)에 반영합니다.

<!--오류로 표기안됨-->는 brush툴 html부분 사용에서 오류가 나서 표기가 안되었기 때문에 저렇게 표기하였습니다.

<!--슬러시body, html-->이라고 한것은 </body></html>이라고 소스코드에 집어넣으면 에러가 나서 저런식으로 표기하였습니다.

위의 코드로 모든 작업은 반응형을 지향한다. 즉, 모델이 변경되면 뷰모델 객체를 통해 HTML DOM이 즉시 변경됩니다.

위의 코드를 이제 MVVM 패턴에 각각 대입해보겠습니다.

1)View

사용자에게 보여줄 툴, 구조

2)ViewModel

뷰 객체이자 뷰모델 객체를 선언하여 뷰(구조) 와 모델(데이터)를 연결하고 보여줄 정보를 제어함.

지금 예제에서는 Vue 객체가 데이터만 가지고 있으만 사실 MVVM 상태에서는 상태(state, 데이터)와 연산(operations, 메서드) 모두 가실 수 있습니다.

var simple = new Vue({
  el : #simple,
  data : model
})

3)Model

보여줄 데이터를 담은 객체를 선언하고 저장.

var model = {
  message : "hello!"
}

위의 코드는 mvvm패턴 중에서도 vue.js 프레임워크의 기본 동작원리를 설명한 것이며, 빠르게 파악하는 것이 매우 중요하다고 하네요~ㅎㅎ

특히 ViewModel이 mvc 패턴의 Controller처럼 어떻게 뷰와 모델을 가지고 추상화되는지에 대해서 좀 더 심화적인 공부가 필요한 것 같네요~

에효 힘들당~ㅎㅎ

항상 코딩 정복을 위한 노력을 소홀히 해서는 안되겠네요~ 모두들 열공!!

---

- 추가 링크

MVVM 패턴 - http://h5homom.tistory.com/entry/MVVM-%EB%AA%A8%EB%8D%B8

vue.js 프레임워크 코드 - https://juliahwang.kr/vuejs/2017/10/16/vue-2-mvvmpattern.html