Flutter MVVM Architecture

기능 개발을 우선으로 생각하고 개발한 결과, 가장 어려웠던 부분은 기능의 확장과 유지보수였다. 

최근에는 이를 고려하여 MVVM 아키텍쳐를 적용하여 개발하기 위해 노력하고 있다. 

 

MVVM 이란?

Model-View-ViewModel의 약자로 UI와 로직을 분리하여 프로그래밍하는 기법이다.

 

MVVM을 사용하는 이유

- 각 영역마다 관심사를 분리하여 설계함으로써 코드의 복잡성이 감소하고, 유지보수성과 확장성이 증가한다.

- View는 단순히 UI만 구성하는 코드를 작성할 수 있게되어 UI 변경 시 ViewModel에 영향이 가지 않는다. 이처럼 View와 ViewModel이 분리되기 때문에 ViewModel의 테스트가 용이해진다.

clean architecture

View

- 사용자에게 보여지는 UI 부분, 사용자의 동작이나 각종 처리를 ViewModel에 의뢰한다.

- Flutter는 선언형 UI로 View의 구성요소들은 Widget이 된다. Flutter의 대표적인 Widget으로는 StatelessWidget, StatefulWidget이 있는데, StatefulWidget의 경우에는 자체적으로 상태를 관리하기 때문에 ViewModel을 통해 상태관리를 하는 경우에는 StatelessWidget을 사용하는게 좋다.

ViewModel

- View로부터 의뢰받은 처리를 Model에 의뢰한다.

- Model로부터의 처리 결과를 View로 전달한다.

-> View의 상태를 유지/관리하는 부분으로 Provider와 같은 상태관리 패키지를 통해 구현이 가능하다.

 

View와 ViewModel을 합쳐서 Presentation Layer라고 한다.

Model

- ViewModel로부터 의뢰받은 로직을 처리한다.

- DB, File, Web 등으로부터 데이터를 가져오거나 전송한다.

- Domain Layer와 Data Layer로 나뉨

Domain Layer

- Use Case: Repository를 통한 비즈니스 로직을 담당하는 부분, ViewModel이 복잡해지는 것을 방지한다.

- Repository: ViewModel의 의뢰를 추상화해놓은 부분, Repository와 ViewModel 간의 의존성을 분리하여 유지보수성과 테스트 용이성을 높인다.

- Entity: 실질적인 Data Model class

Data Layer

- Data Source: DB나 File 등에 접근하여 데이터를 가져오거나 전송하는 부분

- Repository(Implements): Data Source를 통해 Domain Layer의 Repository 추상 클래스를 구현하는 부분

 

각 레이어 별로 역할을 확실한 관심사의 분리로 데이터의 흐름을 일관되게 하면 확장성과 유지보수성이 높고 Testable한 앱을 개발할 수 있다.