Flutter의 MVP 패턴 사용법

Flutter에서 MVP 패턴(Model-View-Presenter)은 애플리케이션의 유지 보수성과 확장성을 높이는 데 도움이 되는 디자인 패턴입니다. MVC 패턴과 유사하게, 비즈니스 로직과 UI 코드를 분리하여 구조화합니다. 그러나 MVP 패턴에서는 Presenter가 View와 Model 간의 상호작용을 관리하여 좀 더 명확하게 역할을 분리합니다. 이번 글에서는 Flutter에서 MVP 패턴을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. MVP 패턴의 기본 개념

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

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

2. MVP 패턴 구현하기

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

3. Counter 예제 구현

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

 

Step 1: Model 정의

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

class CounterModel {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
  }

  void decrement() {
    _counter--;
  }
}

 

 

Step 2: View 정의

View는 사용자 인터페이스를 관리하고, Presenter와 상호작용합니다. View 인터페이스를 정의하여 Presenter가 View를 제어할 수 있도록 합니다.

abstract class CounterView {
  void updateCounter(int value);
}

 

 

Step 3: Presenter 정의

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

import 'counter_model.dart';
import 'counter_view.dart';

class CounterPresenter {
  final CounterModel _model;
  final CounterView _view;

  CounterPresenter(this._view) : _model = CounterModel();

  void increment() {
    _model.increment();
    _view.updateCounter(_model.counter);
  }

  void decrement() {
    _model.decrement();
    _view.updateCounter(_model.counter);
  }
}

 

 

반응형

 

Step 4: UI 구현

이제 UI를 구현하여 Presenter와 상호작용합니다.

import 'package:flutter/material.dart';
import 'counter_presenter.dart';
import 'counter_view.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> implements CounterView {
  late CounterPresenter _presenter;
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    _presenter = CounterPresenter(this);
  }

  @override
  void updateCounter(int value) {
    setState(() {
      _counter = value;
    });
  }

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

 

위 코드는 Model, View, Presenter를 각각 정의하여 MVP 패턴을 구현한 간단한 카운터 애플리케이션 예제입니다.

4. MVP 패턴의 장점

• 코드 구조화: MVP 패턴을 사용하면 코드가 명확하게 구조화되어 가독성과 유지 보수성이 향상됩니다.
• 비즈니스 로직 분리: 비즈니스 로직과 UI 코드를 분리하여 코드의 재사용성과 테스트 용이성을 높일 수 있습니다.
• 역할 명확화: Presenter가 Model과 View 간의 상호작용을 관리하여 각 컴포넌트의 역할이 명확해집니다.

5. MVP 패턴의 단점

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

결론

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