[flutter] 플러터(Flutter) 개발에서 상태 관리를 위해 MobX와 Riverpod를 함께 사용하는 것이 가능한가요?

04 Dec 2023

flutter

먼저, 프로젝트의 pubspec.yaml 파일에 MobX와 Riverpod의 의존성을 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  mobx: ^1.2.1
  flutter_mobx: ^2.0.1
  hooks_riverpod: ^0.15.0

이제 MobX를 사용할 준비가 되었습니다. MobX를 사용하기 위해 mobx_codegen과 build_runner를 설정해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가하세요.

dev_dependencies:
  build_runner: any
  mobx_codegen: ^1.1.2

설정이 완료되었으면, MobX의 상태와 액션을 정의하는 클래스를 작성할 수 있습니다. 예를 들어, Counter 클래스를 만들어보겠습니다.

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

abstract class CounterBase with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}

이제 MobX로 상태를 관리하는 클래스를 정의했으니, Riverpod를 사용하여 이를 제공하고 의존성을 주입할 수 있습니다. 예를 들어, main.dart 파일에서 Riverpod로 Counter를 제공하고 사용하는 코드를 작성해보겠습니다.

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

import 'counter.dart';

final counterProvider = Provider<Counter>((ref) => Counter());

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('MobX + Riverpod Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 상태를 수정하고 읽어오기 위해 Provider를 사용
              Consumer(
                builder: (context, watch, _) {
                  final counter = watch(counterProvider);
                  return Text('Counter: ${counter.value}');
                },
              ),
              SizedBox(height: 16),
              // 상태를 수정하기 위해 Provider를 사용
              ElevatedButton(
                onPressed: () {
                  context.read(counterProvider).increment();
                },
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이제 앱을 실행해보면 MobX와 Riverpod가 함께 동작하는 것을 확인할 수 있습니다. 상태 변경은 MobX에 의해 처리되고, 상태를 사용하는 위젯은 Riverpod를 통해 상태를 읽고 업데이트하는 것을 알 수 있습니다.

MobX와 Riverpod는 각각의 고유한 기능을 제공하면서도 상호 보완적으로 동작하므로, 복잡한 상태 관리 문제를 해결하는 데 효과적입니다. 따라서 플러터 개발에서 MobX와 Riverpod를 함께 사용하는 것을 권장합니다.