[IT Term.] MVVM

https://jobjava00.github.io/assets/image/language/javascript/vuejs/mvvm01.png

 

MVVM 패턴이란 화면을 모델 (Model) -  뷰(View) - 뷰 모델(View Model)로 구조화하여 개발하는 방식을 의미합니다. 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해 할 수 있고 추후 유지 보수가 편해지기 때문입니다.

 

용어	설명
뷰 (View)	사용자에게 보이는 화면
돔 (DOM)	HTML 문서에 들어가는 요소 (태그, 클래스, 속성 등) 의 정보를 담고 있는 데이터 트리
돔 리스너 (DOM Listener)	돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
모델 (Model)	데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩 (Data Binding)	뷰 (View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델 (ViewModel)	뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역

 

MVVM 구조의 처리 흐름

ex) Google 검색 버튼

 

Google 검색 버튼 클릭 -> 돔 리스너 버튼 클릭 감시 -> 버튼 동작 -> 검색 결과 보여주는 로직 처리 (데이터 바인딩) -> 데이터 바인딩 과정에서 검색 결과에 해당하는 데이터를 모델에서 가져옴 -> 화면에 나타내기