MVVM 패턴

MVVM(Model-View-ViewModel) 패턴에서는 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 발견할 수 있다. 뷰 모델 안에서 그리고 뷰에게 수정사항들을 자동적으로 이동시킨다.
뷰모델에서 변화를 주기 위해서, 뷰모델은 옵저버 패턴을 사용한다.

View에서 사용자의 입력을 ViewModel로 전달 → ViewModel에서 Model로 데이터 요청 및 처리 → View는 ViewModel를 Provider나 Stream 등을 통하여 구독하거나 데이터 상태 관리를 통해 View를 업데이트

Model
데이터 소스는 원격 데이터베이스, 로컬 데이터베이스 또는 RESTful API와 같은 것이 될 수 있다. 데이터 소스에 액세스하는 것은 데이터 레포지토리(Data Repository)를 통해 이뤄진다.
사용되는 데이터의 형태를 정의하고 데이터를 처리하는 부분이다.
 
View
UI 요소를 렌더링하고 사용자 이벤트에 응답하는 역할을 한다. ViewModel과 통신하여 표시해야 하는 데이터를 가져온다. 모델은 또한 UI에 뷰로 변환될 수 있다.
사용자에게 보여지는 UI 부분이다.
 
ViewModel
View에서 필요한 데이터를 처리하는 부분이다.
뷰(View)와 모델(Model) 간의 중개자 역할을 한다. Model에서 데이터를 가져오고 View에 표시할 준비를 담당한다. 또한 View에서 이벤트를 수신하고 그에 따라 Model을 업데이트한다. 모델(Model)과 데이터 레포지토리(Data Repository)에 액세스한다.
 

MVVM 패턴 특징

데이터 바인딩

• Model과 UI 요소 간의 싱크를 맞춰주는 것이다. 이를 이용해 View와 로직이 분리되어 있어도 한쪽이 바뀌면 다른 쪽도 업데이트가 이루어져 데이터의 일관성을 유지할 수 있다.

ViewModel:View=1:N

• View와 Model의 의존성이 없을뿐더러 ViewModel과도 양방향 소통을 하지 않아 여러 개의 View가 하나의 ViewModel을 참조하는 방식으로 1:N 구조가 가능하다.

비즈니스 로직과 UI가 별개이다.View는 ViewModel 클래스와 독립적이며 ViewModel에서 상태만 읽는다.

• View와 ViewModel을 분리함으로써 UI 개발과 동시에 ViewModel을 병렬적으로 개발할 수 있다.

흐름

https://flutterawesome.com/a-flutter-project-with-mvvm-api-integration-and-provider-state-management/

 
 

• View → ViewModel → UseCase → Repository → DataSource
• 화살표는 호출의 방향이고, 반대로 데이터는 화살표 반대방향으로 흘러온다.
• 흐름 요약
• View를 통해 사용자의 입력을 받아 ViewModel로 보내면 ViewModel은 Model에 데이터를 요청하여 처리하고 저장한다. View는 직접 ViewModel과의 데이터 바인딩을 통해 View를 업데이트한다. ViewModel은 View에 직접 데이터를 전달하지 않는다.
  • View는 ViewModel에 간섭해서는 안되고, ViewModel은 UseCase에 간섭해서는 안된다.