Flutter MVC, MVP, MVVM + Flux

목적

MVC, MVP, MVVM 패턴의 이해

전체적인 틀은 유사함, 다만 서로가 연결되어 있는 방식이 다를 뿐

MVC

역할에 따른 분리

1. 뷰에서 컨트롤러 호출
2. 컨트롤러에서 모델을 호출
3. 모델에서 값 수정

문제점

• 기능 추가할때 복잡성의 증가(페이스북이 flux로 갈아탄 이유)
• 사이트이펙트 발생

MVP

화면과 로직을 분리하자(유닛테스트)

1. 뷰에서 프리젠터 호출
2. 프리젠터에서 모델 호출
3. 프리젠터에서 모델 참고해서 값 수정
4. 프리젠터에서 뷰로 값이 수정되었다고 알려줌

MVVM(Provider)

https://github.com/flutter-devs/flutter_mvvm_demo/tree/master/lib

lib
\
\ㅡㅡmodels
\     \ㅡ movie.dart
\ㅡㅡpages
\     \ㅡmovie_list_page.dart
\ㅡㅡservices
\      \ㅡwebservice.dart
\ㅡㅡview models
\      \ㅡmovie_view_model
\      \ㅡmovie_list_view_model
\ㅡㅡwidget
       \ㅡmovie_list.dart

화면 알아서 그리렴 난 데이터를 바꾼다
1. 뷰에서 뷰모델 생성

ChangeNotifierProvider(
          create: (context) => MovieListViewModel(),
          child: MovieListPage(),
        )

2. 뷰모델에서 모델 생성, 서비스 생성
   2-1. 영화 모델 정의, fromJson메서드 정의
   2-2. 웹서비스 클래스에서 영화 모델 생성, api요청해서 파싱된 데이터 리턴하는 함수 정의
3. 웹서비스를 통해 영화 데이터를 가져오고 적절하게 파싱
4. 뷰들은 알아서 데이터 받아서 그림

import 'package:fluttermvvm/services/webservice.dart';
import 'package:fluttermvvm/view%20models/movie_view_model.dart';

class MovieListViewModel extends ChangeNotifier {

  List<MovieViewModel> movies = List<MovieViewModel>(); 

  Future<void> fetchMovies(String keyword) async {
    final results =  await Webservice().fetchMovies(keyword);
    this.movies = results.map((item) => MovieViewModel(movie: item)).toList();
    print(this.movies);
    notifyListeners(); 
  }

}

Flux

단방향 데이터 흐름

페이스북은 너무 비대해진 컨트롤러를 쪼개서 상태만 관리하는 Store를 만들었다고 한다.

Flutter는 Flux(React의 Redux)와 유사한 Bloc이 있다.
Bloc에서 Dispatcher == Bloc, Store == State, View === UI, Action == Event로 치환된다.

결론

간단한 프로젝트는 Provider + MVVM 을 활용하고,
복잡한 프로젝트는 Bloc + Flux 를 활용하는게 좋을것 같다.