Vue - MVVM

[ MVVM 패턴 ]

1. MVVM 패턴이란 ?
2. MVVM 패턴의 구성요소
3. MVVM 패턴의 동작방식
4. MVVM 패턴의 장단점

---

1. MVVM 패턴이란?

: MVC 패턴에서 Controller를 빼고 View Model을 추가한 패턴

2. MVVM 패턴의 구성요소

View : UI & UI 로직을 다루는 것

사용자가 스크린을 통해서 보는 것들에 대한 구조, 레이아웃, 형태를 정의하는 것입니다. 뷰는 애니메이션 같은 UI 로직을 포함하되 비즈니스 로직을 포함하지 말아야 합니다.

View Model : 프레젠테이션 로직과 뷰를 위한 상태를 다루는 것

뷰 모델의 역할은 뷰가 사용할 메서드와 필드를 구현하고, 뷰에게 상태 변화를 알리는 것입니다. (뷰는 뷰 모델의 상태 변화를 옵저빙한다.) 뷰 모델에서 제공하는 메서드와 필드가 UI에서 제공할 기능을 정의합니다. 하지만, 뷰가 이 기능을 어떻게 보여줄 것인지를 결정합니다.

ㄴ 일반적으로 뷰 모델과 모델은 일대다 관계를 형성합니다. 뷰 모델은 뷰가 쉽게 사용할 수 있도록 모델의 데이터를 가공해서 뷰에게 제공합니다.

Model : 비즈니스 로직과 데이터를 다루는 것

일반적으로 뷰 모델과 모델은 일대다 관계를 형성합니다. 뷰 모델은 뷰가 쉽게 사용할 수 있도록 모델의 데이터를 가공해서 뷰에게 제공합니다.

3. MVVM 패턴의 동작방식

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하여 화면을 나타냅니다.
   
   

4. MVVM 패턴의 장단점

[ 장점 ]

1. 비즈니스 로직 / 프레젠테이션 로직을 UI로부터 분리하는 과정을 통해 테스트, 유지보수, 재사용이 쉬워진다.

   ⇒ 비즈니스 로직 : 데이터 가공 & 수정을 위한 로직

   ⇒ 프레젠테이션 로직 : 디자인 구성을 위한 로직

2. View와 Model이 서로 전혀 알지 못하기에 독립성을 유지할 수 있다.

3. View와 ViewModel을 바인딩하기 때문에 코드의 양이 줄어든다.

[ 단점 ]

1. 표준화된 틀이 존재하지 않아 사람마다 이해가 다르다.

2. 간단한 UI에서 오히려 ViewModel을 설계하는 어려움이 있을 수 있다.

3. 데이터 바인딩 (Model과 UI 요소 간의 싱크를 맞춰주는 것) 이 필수적으로 요구된다.
   
   

출처: https://beomy.tistory.com/43