[flutter] 플러터와 리버포드를 사용한 MVP 디자인 패턴

21 Dec 2023

flutter

MVP(Mode-View-Presenter) 디자인 패턴은 앱을 개발할 때 많이 사용되는 디자인 패턴 중 하나입니다. 이 디자인 패턴은 모델, 뷰, 프리젠터로 구성되어 있으며, 앱의 비즈니스 로직을 앱의 데이터로부터 분리하여 테스트 가능성을 높이고 유지보수성을 개선하는 데 도움이 됩니다. 플러터(Flutter) 프레임워크와 리버포드(Riverpod) 상태 관리 라이브러리를 사용하여 MVP 디자인 패턴을 구현하는 방법을 알아봅시다.

MVP 디자인 패턴의 구성 요소

MVP 디자인 패턴은 다음과 같은 구성 요소로 이루어집니다.

모델(Model): 데이터와 비즈니스 로직을 관리합니다.
뷰(View): 사용자 인터페이스를 나타내며, 사용자 입력을 처리하는데 사용됩니다.
프리젠터(Presenter): 모델로부터 데이터를 검색하고 뷰에 전달하며, 사용자 입력을 수신하여 모델에 전달합니다.

플러터와 리버포드를 사용한 MVP 디자인 패턴

플러터와 리버포드를 사용하여 MVP 디자인 패턴을 구현하는 방법에 대해 알아보겠습니다.

모델(Model)

class CounterModel {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
  }
}

뷰(View)

class CounterView extends StatelessWidget {
  final int count;
  final void Function() increment;

  CounterView({required this.count, required this.increment});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count: $count'),
            ElevatedButton(
              onPressed: increment,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

프리젠터(Presenter) 및 리버포드 상태 관리

final counterProvider = ChangeNotifierProvider((ref) => CounterModel());

class CounterPresenter {
  final CounterModel _model;

  CounterPresenter(this._model);

  int get count => _model.count;

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

이제 MVP 디자인 패턴을 구현했습니다. 이 방법을 사용하여 플러터 앱을 개발하면 앱의 비즈니스 로직과 사용자 인터페이스가 분리되어 유지보수가 용이해지며, 테스트하기 쉬워집니다.

이 구현은 플러터와 리버포드를 사용하여 MVP 디자인 패턴을 구현하는 간단한 예제입니다. MVP 디자인 패턴을 사용하면 앱을 확장하고 관리하기가 더 쉬워집니다.

복잡한 비즈니스 로직을 갖춘 앱을 구현할 때 MVP 디자인 패턴은 코드의 유지 관리성과 테스트 용이성을 향상시킬 수 있는 강력한 도구입니다.