Flutter Mvvm Clean Architecture Guide

화면에서 데이터까지의 전체적인 흐름도

Mvvm Clean Architecture에서 원론적으로는 3가지 레이어로 나뉘게 됩니다. 

1. Presentation
2. Domain
3. Data 

위에서 Google Clean Architecture 에서는 Domain 생략을 허용합니다.
나는 그 입장에 동의하고, 2가지 레이어인 Presentation 과 Data 레이어로 구성된 흐름도를 Flutter 앱 아키텍처 가이드로 활용하고 있습니다. 

1. Presentation 레이어 안에는 View와 ViewModel 이 있습니다. 
2. Data 레이어에는 Repository와 Service가 있습니다. 
(Service는 flutter retrofit 라이브러리에서 api interface 선언부라고 할 수 있다. 안드로이드 개발의 Retrofit Service와 같다고 볼 수 있다) 

기본적으로 Code Greneration 방식으로 사용한다는 가정으로 구성했습니다. 
(riverpod (viewmodel), repository 주입, service 주입, Retrofit service 구현 등, 화면에서 데이터까지 모든 코드를 Code Generation 방식을 활용하였다. )

 

viewmodel 에서 여러 state 변수를 활용하고 싶을 경우

ViewModel 의 여러 케이스 분석을 위해 위의 UML을 그려서 분석해보았습니다. 

presentation 2 라고 적혀있는 의미는, viewmodel이 여러 변수에 상태값 세팅을 하는 경우를 의미합니다. 

예를들어, 회원가입화면의 경우에 회원가입 viewModel에서는 여러가지 케이스를 세팅하는 경우가 있습니다. 

1. 초기 데이터를 받아와서 초기 데이터 변수에 세팅하는 케이스
2. 회원가입 요청을 하고 성공 또는 에러 상태값을 세팅하는 케이스 

간단하게 2가지만 적었지만, 사용자 Action에 따라서 여러가지 변수를 활용해야 하는 경우가 종종 있습니다. 

 

채팅 화면에서 메시지를 불러올 때의 UML

더 자세하게 살펴보기 위해서 채팅 화면에서 메시지를 불러오는 케이스에 대해서 UML 을 작성해봤습니다. 

초기에 chat화면 (chat_screen)에서 chat viewmodel 에게 메시지 목록을 받아오는 작업을 해야합니다. 
그리고 화면의 상태를 표기해야하는데, loading중인지, 데이터 가져오기를 실패하거나, 성공했을 때의 화면 상태값을 알아야할 필요가 있습니다. 

이런 경우에는 아래의 방법으로 화면 로직 처리를 하면 됩니다.

1. 채팅 리스트에서는 채팅 viewmodel의 message 값만 observe 하고 있다. 
2. 화면 상태값에 따라 화면을 달리 보여준다. 
  a) ScreenState 값이 init일 경우 : CircularProgressIndicator() 를 보여준다. 
  b) ScreenState 값이 initLoaded일 경우 : CircularProgressIndicator() 를 사라지게 한다. 
  c) ScreenState 값이 initLoadedFail일 경우 : 받아오기 실패 dialog를 보여준다. 
  

제가 제시한 Guide의 핵심은, Presentation Layer 와 Data Layer 를 분리하는 작업입니다. 

많은 의견 주시면 감사하겠습니다🙏