MVVM 패턴

MVVM

Model + View + View Model로 구성된 아키텍쳐
 

출처 : 위키백과 (https://ko.wikipedia.org/wiki/모델-뷰-뷰모델)
 

• Model : 메모리 상의 데이터 영역
• View : UI 영역
• View Model : View를 위한 Model. View를 나타내 주기 위한 Model. View와 데이터 바인딩을 통해 연결되어 있다.

 

데이터 바인딩

메모리상의 데이터(Model)와 화면에 그려지는 데이터(View)를 동기화 하는 것.

1. 단방향 데이터 바인딩 : JavaScript(Model) → HTML(View) 한 방향으로만 데이터를 동기화 하는 것. 역으로 HTML에서 JavaScript로 직접적인 갱신은 불가능하다. React는 단방향 데이터 바인딩을 지원한다.
2. 양방향 데이터 바인딩 : ViewModel이 존재하여 JavaScript와 HTML 중 하나만 변경되어도 함께 변경된다. Vue는 양방향 데이터 바인딩을 지원한다.

 

MVVM 동작 순서

1. 사용자 상호작용을 통해 action이 View를 통해 들어온다.
2. View Model에 action을 전달한다. (Command 패턴)
3. View Model은 Model에 데이터를 요청한다. Model이 응답한다.
4. View Model은 응답 받은 데이터를 저장한다.
5. 데이터 바인딩을 통해 View와 View Model의 데이터가 동기화 된다.

Command 패턴은 행위(기능)를 따로 캡슐화하는 패턴이다. Command 패턴과 데이터 바인딩을 통해 View와 View Model간의 의존성을 없앴다. 그리고 당연하게도 View와 Model간의 의존성이 없다.
 
 

예시

앞서 Vue는 양방향 데이터 바인딩을 지원한다고 했다. 그리고 Vue는 MVVM을 완벽하게 따르진 않지만 설계에 영향을 받았다고 한다. 그러니 Vue에서 제공하는 Vue 객체를 View Model, HTML, CSS를 View, 서버에서 얻은 데이터나 로컬에서 생성된 데이터를 Model로 볼 수 있다.
Vue에선 디렉티브(v- 접두사가 있는 특수 속성)을 통해 양방향 데이터 바인딩을 구현할 수 있다.

<script setup>
import { ref } from 'vue'

const message = ref('Hello World!')
</script>

<template>
	<input v-model="message" placeholder="메세지 입력하기" />
	<p>메세지: {{ message }}</p>
</template>

v-model에 값을 넣어준 것만으로 양방향 데이터 바인딩이 가능하다.
 

 
 
React는 단방향 데이터 바인딩을 지원하므로 같은 기능을 구현하려면 onChange={(e) ⇒ handleMessage(e)} 이런 식으로 이벤트 헨들러를 추가해야만 한다.
 
MVVM 패턴에 대해 정리해보았다. Vue를 제대로 사용하진 않아서 유의미한 도움은 안되겠지만 아키텍처에 대한 이해는 높을수록 좋다고 본다.