MVVM패턴
Model-View-ViewModel의 약자
주로 웹 모바일 애플리케이션 개발에 사용
ViewModel는 Model과 View의 중재자 역할을 한다.
MVVM특징
ViewModel과 View간의 양방향 데이터 바인딩을 통해 데이터의 변화를 자동으로 반영할 수 있다.
ViewModel은 비즈니스 로직을 포함하고 View와는 독립적으로 테스트가 용이하다
ViewModel은 여러 View에 재사용될 수 있다.
View는 ViewModel의 상태에 의존하지않고 유연하게 변경 가능하다
MVVM 패턴을 사용하는 주요이점은
사용자 인터페이스와 비즈니스 로직간의 강력한 분리를 달성하는것이며
데이터 바인딩을 통해 이 분리를 쉽게 유지할 수 있다.
Angular, Vue.js, React 등의 프레임워크에서 MVVM 유사개념이 사용되고있다.
이해를 돕기위해 예시코드를 살펴보자.
이해가 되지않는다면,
MVVM패턴은 ViewModel이 View와 Model간의 통신을 관리하고,
데이터바인딩을 수행해 자동으로 화면을 갱신시킬 수 있다고 알아두도록 하자.
<!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">
<input v-model="viewModel.message" placeholder="Type a message">
<p>{{ viewModel.message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
// Model: message라는 속성을 가진 데이터
const model = {message: ''};
// ViewModel: ViewModel객체를 생성해 message속성을 가지도록
const viewModel = new Vue({
data: {message: ''},
watch: {
message(newMessage) {
// 데이터가 변경될 때마다 Model 업데이트
model.message = newMessage;
}
}
});
// View: 입력란과 텍스트를 바인딩한다.
new Vue({
el: '#app',
data: {
viewModel
}
});
</script>
</body>
</html>
'이론' 카테고리의 다른 글
| React 리액트란? (0) | 2023.12.07 |
|---|---|
| MVW패턴이란? (0) | 2023.12.07 |
| 자바의 정석 Chapter08: 예외처리 (0) | 2023.12.07 |
| Apache Commons Validator, Validation Script없는 유효성검사 (0) | 2023.12.06 |
| 국제화란? (0) | 2023.12.06 |
