Flutter 디자인 패턴 적용하기

Flutter로 프로젝트를 진행하다보니 뷰와 로직을 분리할 필요를 느끼게 되었습니다. 또한 Riverpod을 사용하며 로직을 분리하고 깔끔하게 사용해보고 싶어서 Flutter에서 자주 사용되는 디자인 패턴을 알아보았습니다.

Pattern이 필요한 이유

Flutter를 통해 화면을 구현할 때 상태를 가지고 그 상태를 업데이트하는 함수와 상태를 보여주는 위젯이 있습니다.

...
  int count = 0;
  
  void plusNum() {
      count++;
      setState(() {})
  }
  void minusNum() {
      count--;
      setState(() {})
  }
  
  @override
  Widget build(BuildContext context) {
  	return ...
  }

위의 예시는 숫자를 카운트하는 간단한 코드입니다. 이러한 방식으로 위젯을 작성하면 굳이 패턴이 필요 없을 것 같습니다. 하지만 이것보다 복잡한 구조를 가질 경우 코드의 가독성도 떨어지고 코드의 양이 방대해져서 유지보수가 어려워집니다.

MVC Pattern

가장 많이 알려진 패턴 중 하나인 MVC pattern은 MODEL VIEW CONTROLLER 입니다. 많은 프레임워크에서 사용중이나 Flutter에서 MVC 패턴을 어떻게 적용하는지 알아보겠습니다. Flutter 라이브러리 중 MVC패턴을 제공하는 라이브러리가 있습니다. 바로 mvc_pattern입니다.

// model.dart
class Model {
	int count = 0;
	int get counter => _count;
	int incrementCounter() => ++count;
	int decrementCounter() => --count;

}

// controller.dart
class Controller extends ControllerMVC {
	...
    final Model model;
    
    void incrementCounter() {
    	model.incrementCounter();
        setState(() {});
    }
    
    void decrement() {
    	model.decrementCounter();
        setState(() {});
    }
}

view를 담당하는 위젯은 기존의 위젯을 return 하는 것 과 동일하고 위의 코드에서 알 수 있듯이 Model의 값을 업데이트 하는 동시에 View에서 보여주는 값도 업데이트하기 위해 setState를 Controller에서 처리하고 있습니다.

즉 Model을 View가 참조한다라고 생각할 수 있습니다.
그러므로 Model에서 어떠한 값(ex: 변수이름)을 변경한다면 View에서 어떠한 오류가 발생할 것입니다.

MVVM Pattern

MVVM 패턴은 Model View ViewModel 패턴입니다. MVC 패턴에서 파생된 것중 하나로 어떤 것이 다른지 알아보겠습니다.
MVC패턴의 단점 중 하나는 Model을 참조하고 있는 View의 경우 Model에 의존하고 있기 때문에 Model이 변할 경우 참조하고 있는 View 또한 모두 변경해주어야 합니다.

MVVM은 이러한 Model과 View의 의존성을 줄인 것 입니다.
Model View ViewModel은 Model이 두 개입니다. View에서 사용하는 모델을 ViewModel이라하고 Database나 로컬에 있는 Data와 관련된 Model입니다.

MVC와 다르게 Model을 View가 참조하지 않기 때문에 StreamBuilder를 통해 ViewModel이 실시간으로 변경되었는지 확인합니다.

View <-> ViewModel <-> Model

참고자료 및 출처

mvc pattern with flutter - youtube
mvvm_pattern with flutter - youtube