etc.
[IT Term.] MVVM
hotamul
2022. 1. 26. 21:30
MVVM 패턴이란 화면을 모델 (Model) - 뷰(View) - 뷰 모델(View Model)로 구조화하여 개발하는 방식을 의미합니다. 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해 할 수 있고 추후 유지 보수가 편해지기 때문입니다.
| 용어 | 설명 |
| 뷰 (View) | 사용자에게 보이는 화면 |
| 돔 (DOM) | HTML 문서에 들어가는 요소 (태그, 클래스, 속성 등) 의 정보를 담고 있는 데이터 트리 |
| 돔 리스너 (DOM Listener) | 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 |
| 모델 (Model) | 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 |
| 데이터 바인딩 (Data Binding) | 뷰 (View)에 표시되는 내용과 모델의 데이터를 동기화 |
| 뷰 모델 (ViewModel) | 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역 |
MVVM 구조의 처리 흐름
ex) Google 검색 버튼
Google 검색 버튼 클릭 -> 돔 리스너 버튼 클릭 감시 -> 버튼 동작 -> 검색 결과 보여주는 로직 처리 (데이터 바인딩) -> 데이터 바인딩 과정에서 검색 결과에 해당하는 데이터를 모델에서 가져옴 -> 화면에 나타내기