Flutter의 MVVM 패턴 사용법

Flutter에서 MVVM(Model-View-ViewModel) 패턴은 애플리케이션의 유지 보수성과 확장성을 높이는 데 도움이 되는 디자인 패턴입니다. MVVM 패턴을 사용하면 비즈니스 로직과 UI 코드를 분리하여 코드의 구조를 개선할 수 있습니다. 이번 글에서는 Flutter에서 MVVM 패턴을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. MVVM 패턴의 기본 개념

MVVM 패턴은 세 가지 주요 컴포넌트로 구성됩니다:

• Model: 애플리케이션의 데이터와 비즈니스 로직을 관리합니다.
• View: 사용자 인터페이스를 관리합니다.
• ViewModel: Model과 View 간의 상호작용을 관리하고, 비즈니스 로직을 처리합니다.

2. MVVM 패턴 구현하기

MVVM 패턴을 구현하려면 각 컴포넌트를 정의하고, 이를 연결하는 방법을 알아야 합니다.

3. Counter 예제 구현

이제 MVVM 패턴을 사용하여 간단한 카운터 애플리케이션을 구현해보겠습니다.

 

Step 1: Model 정의

Model은 애플리케이션의 데이터와 비즈니스 로직을 관리합니다.

class CounterModel {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
  }

  void decrement() {
    _counter--;
  }
}

 

Step 2: ViewModel 정의

ViewModel은 Model과 View 간의 상호작용을 관리하고, 비즈니스 로직을 처리합니다.

import 'package:flutter/material.dart';
import 'counter_model.dart';

class CounterViewModel extends ChangeNotifier {
  final CounterModel _model = CounterModel();

  int get counter => _model.counter;

  void increment() {
    _model.increment();
    notifyListeners();
  }

  void decrement() {
    _model.decrement();
    notifyListeners();
  }
}

 

 

반응형

 

 

Step 3: View 정의

View는 사용자 인터페이스를 관리합니다. ViewModel을 사용하여 데이터를 표시하고 사용자 입력을 처리합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_viewmodel.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => CounterViewModel(),
      child: MaterialApp(
        home: CounterScreen(),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final viewModel = Provider.of<CounterViewModel>(context);

    return Scaffold(
      appBar: AppBar(title: Text('MVVM Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '${viewModel.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: viewModel.increment,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: viewModel.decrement,
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

 

위 코드는 Model, ViewModel, View를 각각 정의하여 MVVM 패턴을 구현한 간단한 카운터 애플리케이션 예제입니다. ChangeNotifierProvider를 사용하여 ViewModel을 위젯 트리에 공급하고, Provider.of를 사용하여 ViewModel의 데이터를 구독하고 상태 변화를 반영합니다.

4. MVVM 패턴의 장점

• 코드 구조화: MVVM 패턴을 사용하면 코드가 명확하게 구조화되어 가독성과 유지 보수성이 향상됩니다.
• 비즈니스 로직 분리: 비즈니스 로직과 UI 코드를 분리하여 코드의 재사용성과 테스트 용이성을 높일 수 있습니다.
• 반응형 UI: ViewModel을 사용하여 상태 변화를 자동으로 반영하여 반응형 UI를 쉽게 구현할 수 있습니다.

5. MVVM 패턴의 단점

• 초기 설정 복잡성: MVVM 패턴을 처음 설정하는 데 다소 복잡할 수 있으며, 작은 애플리케이션에서는 오버헤드가 발생할 수 있습니다.
• 보일러플레이트 코드 증가: 인터페이스와 클래스의 정의로 인해 보일러플레이트 코드가 증가할 수 있습니다.

결론

Flutter에서 MVVM 패턴을 사용하면 애플리케이션의 구조를 명확하게 하고, 유지 보수성과 확장성을 높일 수 있습니다. Model, View, ViewModel을 각각 정의하여 비즈니스 로직과 UI를 분리하고, 각 컴포넌트의 역할을 명확하게 할 수 있습니다. MVVM 패턴을 적절히 활용하여 유지 보수성과 확장성이 뛰어난 애플리케이션을 만들어보세요.