MVVM이란?

MVVM의 탄생기

2004년 

마틴 파울러의 프레젠테이션 모델(PM) 패턴  발표

- 프레젠테이션 모델 = 뷰의 추상화

- 뷰는 단지 프레젠테이션 모델의 렌더링에 불과

- 프레젠테이션 모델은 뷰를 자주 업데이트하여 동기화 상태 유지

- 동기화 로직은 프레젠테이션 모델 클래스에 코드로 존재

 

 

2005년

- MS사는 마틴 파울러의 아이디어를 수용하여 MVVM 체계화 및 도입

- 두 패턴 모두 뷰의 상태와 동작을 포함해 추상화

- PM 패턴을 WPF 및 Silverlight 플랫폼에 맞게 특화시킨 것

 

 

 

MVVM의 특징

- 과거와 다른 애플리케이션의 UI 개발 환경의 변화

  - 코딩을 덜 필요로 하며, 다양한 툴, 언어, 사람, 로직 등에 의해 이루어짐

- 하나의 환경 혹은 하나의 언어를 사용하던 과거와 달리, 현재 트렌드를 반영해 발전시킨 MVC의 업그레이드 버전

- 또한 MVVM은 데이터 바인딩을 위한 일반적인 메커니즘에 한 가지 더 의존

 

 

MVVM의 장점

- 독립적인 모델을 만들고, 뷰모델은 어댑터 역할을 하며, 모델 코드의 간섭을 줄인다.

- 개발자는 뷰를 사용하지 않고, 뷰모델과 모델에 대한 단위테스트를 만들 수 있다.

- 상태와 동작이 뷰모델에 있으므로, Ui 수정이 유연하다.

- 디자이너와 개발자는 독립적으로, 동시에 작업할 수 있다.

 

What is MVVM?

- 고수준에서 저수준으로, 단방향 의존 관계이다.

- 따라서 뷰모델은 뷰를 분리하고, 모델이 뷰와 독립적으로 발전할 수 있도록 한다.

- 뷰는 뷰모델의 프로퍼티를 바인드한다.

 

 

 

Model

- 모델은 MVC에서 정의하던 모델과 같다.

- 애플리케이션의 데이터를 저장하고 도메인의 처리 및 유효성 검사를 수행하는 완전히 UI와 독립적인 데이터 또는 비즈니스 로직이다.

- 모델은 코드로 작성되거나 관계형 테이블 또는 XML로 인코딩된 순수한 데이터로 표현된다.

 

View

- 뷰는 사용자에게 비추어지는 모든 UI 구성요소를 담당한다.

- 뷰는 거의 항상 선언적으로 정의되어있고, 대부분 도구를 사용하여 정의된다.

- 이런 도구와 선언적 언어의 특성상 MVC가 뷰에서 인코딩하는 일부 뷰상태는 표현하기 쉽지 않다.

- 이 시점에서 '데이터 바인딩'이라는 개념이 작동한다.

- 뷰는 단방향 혹은 양방향 데이터바인딩을 통해 모델에 직접 연결될 수 있다.

 

ViewModel

- 뷰 모델은 뷰의 추상화이자, 용어 의미 그대로 뷰의 모델을 의미한다.

(굳이 리액트로 치자면 모델은 서버에서 불러온 데이터이고, 뷰모델은 state화 해놓은거고, view는 JSX에 데이터 바인딩한 꼴인건가?)

 

 

View - ViewModel

- 뷰모델은 뷰가 데이터바인딩할 수 있는 속성과 명령을 구현하고 뷰에게 알린다.

- 뷰는 UI 스레드를 차단하지 않은 상태로 유지해야하기 때문에 뷰모델에서 I/O 작업에 비동기 메서드를 사용하고, 이벤트를 발생시켜 뷰에 속성 변경 사항을 비동기적으로 알린다.

- 뷰모델과 뷰는 1:N 관계를 유지한다.

  - 뷰모델은 뷰를 알지 못하며, 뷰의 추상화이다.

  - 따라서 재사용이 용이하다.

 

- 주의할 점으로, 뷰모델에선 뷰의 버튼 혹은 리스트뷰와 같은 뷰 타입을 참조하지 않는다.

  - 강한 결합이 발생한다.

 

ViewModel - Model

- 뷰모델은 데이터바인딩에 사용할 수 있는 모델의 특수화도 제공한다.

- 뷰모델은 뷰가 쉽게 사용할 수 있는 형식으로 모델의 데이터를 가공해 제공한다.

- 뷰모델과 모델은 1:N 관계를 유지한다.

  - 모델은 뷰모델과 뷰, 그 누구도 알지 못한다.

  - 뷰와 독립적으로 발전할 수 있다.

 

MVC와 MVVM의 차이

- 추상화를 통해 뷰로부터 프레젠테이션 로직을 분리함

- 뷰모델 vs 컨트롤러

...이라는데 쉽게 말하면, 뷰는 진짜 GUI 표시에만 집중하고 나머지 비즈니스적/기능적인 로직들은 모두 뷰모델이 갖는다.

 

리액트는 MVVM인가?

- 아니다. MVVM은 양방향 데이터 바인딩을 강조하는데, 리액트는 단방향 데이터 바인딩을 고수한다.

- 위와 같은 차이점을 제외하면 많이 흡사하긴 하다.

- 리액트는 정리하면 단방향 데이터 흐름을 강조하는 컴포넌트 기반 아키텍처라고 볼 수 있다.

- 반면 Vue라이브러리가 MVVM 모델의 대표 라이브러리라고 볼 수 있다.