[Vue.js] MVVM 패턴

MVVM 패턴이란?

MVVM 패턴은 Vue의 패턴으로 Model, View, ViewModel을 사용해 View와 Model을 분리하는 역할로 ViewModel의 데이터가 변경되면 View(DOM)가 즉각 변경되게 된다.
Vue.js에서 MVVM은 ViewModel을 담당하고 이벤트 발생 시 ViewModel의 Callback 함수를 호출한다.

디자인 패턴

디자인 패턴 : 프로그램 개발시 자주 나타나느 문제를 해결하기 위한 방법/규약을 묶어, 이름을 붙인 것으로, 협업하기 수월 및 유지보수에 용이하다.
디지인 패턴을 강제하여 사용하게 하는 것을 FramWork 라고 한다.

디자인 패턴 종류에는 2가지가 있다.

• MVC
• MVVM

MVC란?

• Model : 데이터 구조
• View : 화면
• Controller : 데이터 구조와 화면을 연결
  Controller을 통해 Model로 View를 조작하게 되는 것이다.

MVVM이란?

• Model : 실제 데이터를 처리하는 소스코드
• View : UI에 해당하는 소스코드
• ViewModel : View를 표현하기 위해 만들어진 코드

MVC와 MVVM은 비슷한 개념이라고 생각하면 된다.

MVVM패턴 동작과정

1) 사용자는 View를 통해 입력한다.
2) View에서 이벤트 발생시, View Model의 콜백 함수를 호출한다.
3) ViewModel은 Model에게 필요한 데이터를 요청하고, 전달 받는다.
4) ViewModel은 받은 데이터를 저장한다.
5) ViewModel에 저장하면, Binding으로 인해 View 값이 자동 갱신된다.

즉, Vue.js를 사용하지 않았을 때에는 ViewModel 없이 Model(JavaScript)로 View(DOM)을 직접 제어 하였다면, Vue.js를 사용할 때에는 Vue.js(ViewModel)를 통하여 View(DOM)을 제어 합니다.