플러터(Flutter) 앱의 상태 관리는 앱의 성능과 유지 보수성에 매우 중요합니다. MobX와 GetX는 플러터 앱의 상태 관리를 돕는 두 가지 인기있는 라이브러리입니다. 그러나 이 두 라이브러리를 함께 사용하는 것은 가능합니다.

MobX와 GetX는 기본적으로 상태 관리를 위한 서로 다른 접근 방식을 제공합니다. MobX는 관찰 가능한 상태 변경에 기반하여 앱의 리액션을 자동으로 업데이트합니다. 반면 GetX는 의존성 주입, 라우팅, 상태 관리 등을 종합적으로 제공하는 라이브러리로, 단순한 상태 관리 이상의 기능을 제공합니다.

두 라이브러리를 함께 사용하는 방법은 간단합니다. 먼저 pubspec.yaml 파일에서 MobX와 GetX의 의존성을 추가해야 합니다. 아래는 MobX와 GetX의 예시 의존성 선언입니다.

dependencies:
  flutter_mobx: ^3.2.0
  get: ^4.3.1

그리고 상태 관리에 사용할 MobX Store 클래스를 만들어야 합니다. MobX Store 클래스는 @observable과 @action을 사용하여 관찰 가능한 상태와 액션 메서드를 정의합니다.

import 'package:flutter_mobx/flutter_mobx.dart';

class CounterStore = _CounterStore with _$CounterStore;

abstract class _CounterStore with Store {
  @observable
  int count = 0;

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

위의 예시에서 CounterStore는 MobX의 Store 클래스이며, count 변수는 관찰 가능한 상태입니다. increment 메서드는 상태를 변경하는 액션 메서드입니다.

마지막으로 GetX를 사용하여 앱의 화면과 MobX Store를 연결해야 합니다. GetX에서 제공하는 GetBuilder 위젯을 사용하면 간단하게 상태를 업데이트할 수 있습니다.

import 'package:get/get.dart';
import 'counter_store.dart';

class CounterPage extends StatelessWidget {
  final CounterStore _counterStore = Get.put(CounterStore());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: GetBuilder<CounterStore>(
          builder: (controller) => Text(
            '${controller.count}',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _counterStore.increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

위의 예시에서 GetBuilder<CounterStore>는 MobX Store를 관찰하고, 상태가 변경될 때마다 앱의 화면을 업데이트합니다. increment 메서드는 floatingActionButton을 누를 때 실행되며, MobX의 상태가 변경되어 화면이 다시 그려집니다.

이렇게 MobX와 GetX를 함께 사용하여 플러터 앱의 상태 관리를 쉽고 효율적이게 할 수 있습니다. MobX의 관찰 가능한 상태와 GetX의 강력한 기능을 조합하여 플러터 앱 개발을 더욱 간편하게 만들 수 있습니다.

참고 자료:

• MobX 공식 문서: https://mobx.netlify.app
• GetX 공식 문서: https://github.com/jonataslaw/getx