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

 

MVVM

 

MVVM 패턴은 MVC의 C에 해당하는 컨트롤러가 뷰모델로 바뀐 패턴이다.

 

MVVM 패턴 구조

 

 

 

---

1. 장단점 

• MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지고 있다.
• 뷰와 모델 사이의 양방향 데이터 바인딩을 지원한다.
• UI를 별도의 코드 수정 없이 재사용할 수 있다.
• 단위 테스트하기 쉽다.

커맨드란?
여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법

데이터 바인딩이란?
화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경된다.

 

 

 

---

2. 모델(Model)

화면 표현하는데 필요한 데이터를 관리하며 사용자가 입력한 데이터를 저장하거나, 서버로 부터 받은 데이터를 저장합니다. 데이터 변경 시 View Model에게 변경 알림을 전송합니다. 

 

 

 

---

3. 뷰(View)

뷰(View)는 MVC와 MVP 패턴에서와 같이 뷰는 사용자가 화면에서 보는 것들에 대한 구조, 배치와 같이 외관에 해당한다. 

모델을 보이게 표현하고 사용자와 뷰의 상호 작용을 수신하여, 이에 대한 처리를 뷰와 뷰 모델의 연결을 정의하고 있는 데이터 바인딩(속성, 이벤트 콜백 함수 등)을 통하여 뷰 모델로 전달하고, 뷰모델의 상태 변화가 전달되면 화면을 갱신한다.

 

 

 

---

4. 뷰 모델(View Model)

뷰 모델(View Model)은 공용 속성과 공용 명령을 노출하는 뷰에 대한 추상화를 말한다.
즉, 뷰를 더 추상호한 계층이다.

MVVM은 바인더(Binder)를 가지고 있는데, 이는 뷰 모델에 있는 뷰에 연결된 속성과 뷰 사이의 통신을 자동화한다. 뷰 모델은 모델에 있는 데이터의 상태라고 표현을 하기도 한다.