1. MVVM(Model - View - ViewModel) 이론

MVVM패턴은 소프트웨어 아키텍처 디자인 패턴 중 하나로 주로 UI개발에 적용되는 패턴

1.1 Model

데이터와 비즈니스 로직을 관리

class Model {
  int _count = 0;
  
  int get count => _count;
  
  void increment(){
    _count++;
  }
}

1.2 View

사용자의 입력을 처리하고, 사용자에게 정보를 표기

class View extends StatelessWidget {  // 상태(State)를 직접 가지지 않는 컴포넌트
  const View({super.key});
  
  @override
  Widget build(BuildContext context){
    final Model model = Model();
    final ViewModel viewModel = ViewModel(model);
    
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () => viewModel.increment(),
        child: ValueListenableBuilder<int>(
          valueListenable: viewModel.count,
          builder: (context, count, child){
            return Text('$count');
          }
        )
      ),
    );
  }
}

1.3 ViewModel

View 와 Model 사이의 중재자 역할로 View 에 표기될 데이터와 명령을 노출하고, 뷰의 액션을 모델로 전달

class ViewModel {
  final Model _model;
  
  ViewModel(this._model);
  
  final ValueNotifier<int> count = ValueNotifier<int>(0);
  
  void increment(){
    _model.increment();
    count.value = _model.count;
  }
  
  void dispose(){
    count.dispose();
  }
}

2. MVVM 패턴 장점

데이터 바인딩

데이터 바인딩을 통해 모델의 변경이 자동으로 뷰에 반영되므로 개발자가 명시적으로 업데이트 코드를 작성할 필요가 없다.

코드 분리

비즈니스 로직과 UI로직이 분리되어 각각의 역할에 집중할 수 있으며, 코드의 가독성과 유지보수성이 향상된다.