1.1.10 MVVM 패턴

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

▲ 그림 1-26 MVVM 패턴

여기서 뷰모델은 뷰를 더 추상화한 계층이며, MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징입니다. 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있습니다.

MVVM 패턴의 예: 뷰

MVVM 패턴을 가진 대표적인 프레임워크로는 뷰(Vue.js)가 있습니다. Vue.js는 반응형(reactivity)이 특징인 프런트엔드 프레임워크입니다. 예를 들어 watch와 computed 등으로 쉽게 반응형적인 값들을 구축할 수 있습니다.

함수를 사용하지 않고 값 대입만으로도 변수가 변경되며 양방향 바인딩, html을 토대로 컴포넌트를 구축할 수 있다는 점이 특징입니다. 재사용 가능한 컴포넌트 기반으로 UI를 구축할 수 있으며 BMW, 구글, 루이비통 등에서 사용합니다.

용어