디자인 패턴 - MVVM 패턴

MVVM 패턴

MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴

뷰모델은 뷰를 더 추상화한 계층이며, MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징

뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원

UI를 별도의 코드 수정 없이 재사용 가능

단위테스팅 쉬움

 

 

MVVM 패턴의 예: 뷰

MVVM 패턴을 가진 대표적인 프레임워크로는 뷰(Vue.js)

반응형이 특징인 프런트엔드 프레임워크

watch와 computed 등으로 쉽게 반응형 적인 값들을 구축할 수 있음

 

함수를 사용하지 않고 값 대입만으로 변수가 변경됨

양방향 바인딩, html을 토대로 컴포넌트 구축 가능

재사용 가능한 컴포넌트 기반으로 UI 구축 가능

 

커맨드

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

 

데이터 바인딩

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

 

동작

 

1. 사용자의 Action들은 View를 통해 들어옴
2. View에 Action이 들어오면, Command 패턴으로 View Model에 Action전달
3. View Model은 Model에게 데이터 요청
4. Model은 View Model에게 요청받은 데이터를 응답
5. View Model은 응답 받은 데이터를 가공하여 저장
6. View는 View Model과 Data Binding하여 화면을 나타냄

특징

 

Command 패턴과 Data Binding 두가지 패턴을 사용하여 구현됨

그리하여 View와 View Model 사이의 의존성 없앰

View Model과 View는 1:N 관계

 

장점

 

MVVM 패턴은 View와 Model 사이의 의존성이 없음

Command 패턴과 Data Binding을 사용하여 View와 View Model 사이의 의존성 또한 없앤 디자인패턴

각각의 부분은 독립적이기 때문에 모듈화 하여 개발 가능

 

단점

 

MVVM 패턴의 단점은 View Model의 설계가 쉽지 않다는 점

출처: https://beomy.tistory.com/43 [beomy:티스토리]