MVVM

디자인 패턴

Posted by MinHyun-Code on 2024.02.19 etc


MVC

Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분

View : 사용자에게 보여지는 UI 부분

View Model : View를 표현하기 위해 만든 View를 위한 Model. 데이터 처리를 하는 부분 (ex. Vue.js)


동작 순서

  1. 사용자의 Action들이 View를 통해 들어오게 됨.
  2. View에 Action이 들어오게 되면, Command 패턴으로 View Model에 Action을 전달
  3. View Model은 Model에게 데이터를 요청
  4. Model은 View Model에게 요청받은 데이터를 응답
  5. View Model은 응답받은 데이터를 가공하여 저장
  6. View는 View Model과 Data Binding하여 화면을 나타냄


특징

Command 패턴Databinding으로 View와 View Model 의존성을 해결 View Model과 View는 1:n 관계


장점

View와 Model의 의존성, View와 View Model의 의존성 해결 MVC 패턴, MVP 패턴의 단점을 보완

각각의 부분은 독립적이기 때문에 모듈화하여 개발이 가능


단점

View Model의 설계가 어렵다.



Command

여러가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법

Data Binding

화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법, View Model을 변경하면 View가 변경




참고 링크

https://beomy.tistory.com/43

https://cocococo.tistory.com/entry/MVVM-%ED%8C%A8%ED%84%B4Model-View-ViewModel%EC%9D%B4%EB%9E%80