Flutter 앱 개발을 위한 MVVM아키텍처 - 1부 MVVM이란?

모바일 앱 개발을 하게 되면 기본적으로 필요한 구조와 기능이 있다.

Android, iOS앱 할것 없이 결국 앱이 구현해야 하는 최종 기능은 같다.

Flutter로 앱을 만들때도 마찬가지다.

 

앱을 개발한다면 앱의 확장성과 유지보수의 편의성을 고려해서 꼭 아키텍처를 적용하는 것이 필요하다.

개인적으로 모바일 앱에 가장 적합한 아키텍처는 MVVM이라고 생각한다.

Flutter로 앱을 개발할때 Andorid 앱 개발에 사용하던 MVVM 아키텍처를 어떻게 하면 Flutter 특성에 맞게 잘 적용 시킬 수 있을지 많은 고민을 했었다.

 

Android개발자중 MVVM이 AAC (Android Architecture Component)로만 사용할수 있는 기능처럼 생각하는 사람들도 있는데

MVVM은 AAC가 없이도 개발에 적용할 수 있는 개념적인 것이다.

MVVM은 일관된 Data의 흐름을 만들 수 있고, 각 레이어별로 (View / ViewModel / Model ) 개발과 테스트가 용이하게 만들수 있다는 장점이 있다.

< Android MVVM>

 

위 모습이 Android에서 사용하는 MVVM의 가장 기본 모습이다.

Flutter에서도 위와 유사한 구조로 앱을 설계 할수 있다.

Flutter MVVM

View Layer

UI요소들로 다양한 위젯으로 화면을 구성한다.  (눈으로 볼수 있는  화면으로 Widget의 build과정을 통해 화면에 표시된다)

ViewModel Layer

View에 필요한 데이터들 (State) 을 유지하고, View와 연관된 비지니스 로직을 처리한다. 

비지니스 로직 처리 중 필요한 데이터는 Data Layer을 통해 받아오거나 저장한다. 

flutter기술에서 가장 중요한 주제중 하나인  state management는 
이 ViewModel 부분과 관련 기술들이라고 할 수 있다.

Data Layer

Local data source나 Remote data source에 저장된 정보를 가져오거나 갱신하는 역할을 한다. 

대부분의 앱의 경우 Remote data source는 API서버와 통신을 의미하고, Local data source는 로컬파일이나 로컬DB를 의미한다. 

 

아래 이미지는 Flutter에서 MVVM에 대한 기본 관계를 표시하고 있다.

 

아래 이미지는 아키텍처에서 Data와 Action의 흐름을 나타 내고 있는데 개인적으로 가장 단순해 보이지만 가장 중요한 의미를 가지는 그림이라고 생각한다. 

 

 

 

아키텍처의 핵심은 단방향 의존성 그리고 Action과 Data의 명확하고 일관된 흐름에 있다. 

각  레이어별로 역할을 명확히 하고 data와 action의 흐름을 일관되게 할 때에만 확장성 있고, 이해하기 쉽우며,  테스트하기 좋은 앱을 만들 수 있다. 

 

   

>  2부에서 계속