MVVM(Model-View-ViewModel) pattern
데이터 바인딩을 사용하여 View와 ViewModel 간에 양방향 데이터 흐름을 유지한다.
MVVM은 각 구성 요소가 엄격하게 분리되어 유지되어 코드의 재사용성과 테스트 용이성을 높인다.
구성 요소는 Model, View, ViewModel을 갖고있다.
구성요소
Model
- 데이터와 비지니스 로직을 담당하며, 데이터를 가져오고 저장하는 역할을 수행한다.
View
- 사용자 인터페이스를 담당하는 부분을 담당하며, 사용자의 입력을 ViewModel로 전달한다.
ViewModel
- View와 Model 간의 중간 계층으로, 뷰에 표시되는 데이터와 사용자 입력을 처리한다.
- ViewModel은 View를 통해 들어오는 사용자 입력을 해석하고, Model로부터 데이터를 가져와 View에 전달한다.
- ViewModel은 비즈니스 로직을 처리하며, 데이터 바인딩을 통해 View에 변경 사항을 자동으로 반영한다.
예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MVVM Example</title>
</head>
<body>
<div id="app">
<div>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" v-model="firstName" />
</div>
<div>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" v-model="lastName" />
</div>
<div>
<p>Full Name: {{ fullName }}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
});
</script>
</body>
</html>
v-model 디렉티브를 사용하여 입력 요소와 데이터 속성을 양방향으로 바인딩
사용자가 입력 필드에 값을 입력하면 Vue 인스턴스의 데이터 속성이 업데이트되고 화면에 바로 반영된다.
특징.
장점
- 뷰 로직과 비지니스 로직을 분리하여 생산성을 높힐 수 있다.
- 뷰와 뷰모델이 1:n 관계이기 때문에 중복되는 로직을 모듈화 해서 여러 뷰에 적용할 수 있다.(코드 재사용성이 좋음)
- 테스트하기 좋다.(의존성이 없음)
단점
- 데이터 바인딩으로 인한 메모리 소모가 심하다.
- ViewModel 설계가 복잡하다.
Brendan Eich, Jordan Walke, Evan You, 권용준