Flutter의 MobX 사용법

Flutter에서 상태 관리는 애플리케이션 개발의 핵심 요소 중 하나입니다. 다양한 상태 관리 패턴 중 MobX는 관찰 가능한 상태와 반응성을 기반으로 한 강력한 상태 관리 라이브러리입니다. MobX는 상태가 변경될 때 자동으로 UI를 업데이트하여 간결하고 직관적인 상태 관리를 제공합니다. 이번 글에서는 Flutter에서 MobX를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. MobX의 기본 개념

MobX는 관찰 가능한 상태(observable state), 반응(reaction), 액션(action) 등의 개념을 사용하여 상태를 관리합니다. 주요 구성 요소는 다음과 같습니다:

• Observable: 상태를 나타내며, 상태가 변경되면 이를 관찰하는 모든 반응이 트리거됩니다.
• Action: 상태를 변경하는 함수입니다.
• Reaction: 상태의 변경에 반응하여 실행되는 함수입니다.

2. MobX 패키지 설치

먼저, mobx와 flutter_mobx 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  mobx: ^2.0.0
  flutter_mobx: ^2.0.0

dev_dependencies:
  build_runner: ^2.1.7
  mobx_codegen: ^2.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Counter 예제 구현

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

 

 

Step 1: Store 정의

Store는 상태를 관리하는 클래스입니다. Store 클래스를 정의하고, mobx_codegen을 사용하여 코드 생성을 위해 part 지시자를 추가합니다.

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = _Counter with _$Counter;

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

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

 

Step 2: 코드 생성

다음 명령어를 실행하여 MobX 코드를 생성합니다.

flutter packages pub run build_runner build

 

이 명령어는 counter.g.dart 파일을 생성하여 MobX의 코드 생성을 완료합니다.

 

 

Step 3: UI 구현

이제 MobX를 사용하여 UI를 구현합니다.

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

import 'counter.dart';

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

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

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

    return Scaffold(
      appBar: AppBar(title: Text('MobX Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Observer(
              builder: (_) => Text(
                '${counter.value}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

위 코드는 Provider와 Observer를 사용하여 MobX와 UI를 연결합니다. Provider는 Counter 인스턴스를 위젯 트리에 공급하고, Observer는 상태 변화를 구독하여 UI를 업데이트합니다.

 

 

반응형

 

4. 다양한 MobX 기능 사용하기

MobX는 다양한 기능을 제공하여 상태 관리를 더욱 효율적으로 할 수 있습니다. 다음은 몇 가지 주요 기능입니다.

 

Computed

Computed는 다른 상태를 기반으로 계산된 값을 제공합니다.

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

  @computed
  String get valueString => 'Current value: $value';

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

 

Observer를 사용하여 Computed 값을 UI에 반영할 수 있습니다.

 

Observer(
  builder: (_) => Text(
    counter.valueString,
    style: Theme.of(context).textTheme.headline4,
  ),
)

 

Reaction

Reaction은 상태의 변경에 반응하여 실행되는 함수입니다. 예를 들어, 특정 상태가 변경될 때 로그를 남길 수 있습니다.

 

reaction(
  (_) => counter.value,
  (value) => print('Value changed to $value'),
);

 

AsyncAction

AsyncAction은 비동기 작업을 처리하는 데 사용됩니다.

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

  @action
  Future<void> incrementAsync() async {
    await Future.delayed(Duration(seconds: 1));
    value++;
  }
}

 

5. MobX 패턴의 장점

• 반응성: 상태가 변경될 때 자동으로 UI가 업데이트됩니다.
• 유연성: 다양한 기능(Computed, Reaction, AsyncAction 등)을 제공하여 효율적인 상태 관리를 지원합니다.
• 간결성: 상태 관리 코드를 간결하고 직관적으로 작성할 수 있습니다.

6. MobX 패턴의 단점

• 학습 곡선: MobX의 개념과 기능을 이해하는 데 시간이 필요할 수 있습니다.
• 코드 생성 의존성: build_runner와 mobx_codegen을 사용하여 코드를 생성해야 합니다.

결론

MobX는 Flutter 애플리케이션에서 반응형 상태 관리를 제공하는 강력한 라이브러리입니다. Observable, Action, Reaction 등의 개념을 사용하여 상태를 관리하고, 자동으로 UI를 업데이트할 수 있습니다. MobX를 적절히 활용하여 유지 보수성과 확장성이 뛰어난 애플리케이션을 만들어보세요.