[flutter] 플러터(Flutter)에서 상태 관리를 위해 MobX를 어떻게 구현하나요?

04 Dec 2023

flutter

플러터(Flutter)에서는 여러 가지 상태 관리 라이브러리를 사용할 수 있으며, MobX는 그 중 하나입니다. MobX는 플러터(Flutter) 앱의 복잡한 상태 관리를 간단하고 효율적으로 처리할 수 있는 강력한 도구입니다. 이 글에서는 MobX를 플러터(Flutter) 프로젝트에 어떻게 구현하는지 알아보겠습니다.

1. MobX 및 MobX 코드 생성기 추가하기

먼저, pubspec.yaml 파일에 MobX 및 MobX 코드 생성기를 추가해야 합니다. dependencies 섹션에 아래와 같이 코드를 추가해주세요.

dependencies:
  flutter_mobx: ^2.2.2

dev_dependencies:
  mobx_codegen: ^2.0.0
  build_runner: ^1.11.0

추가한 후, 터미널에서 flutter packages get 명령을 실행하여 패키지를 설치해주세요.

2. MobX 상태 클래스 생성하기

MobX의 핵심은 상태 클래스를 정의하고, 해당 클래스의 필드를 관찰 가능한(Observable)으로 선언하는 것입니다. 이를 통해 상태가 변경될 때 자동으로 UI가 업데이트될 수 있습니다.

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = _Counter with _$Counter;

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

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

  @action
  void decrement() {
    count--;
  }
}

3. MobX 코드 생성하기

상태 클래스를 정의한 후, MobX 코드 생성기를 사용하여 필요한 코드를 생성해야 합니다. 터미널에서 아래와 같은 명령을 실행하세요.

flutter packages pub run build_runner build

이 명령을 실행하면 counter.g.dart 파일이 생성됩니다. 이 파일은 상태 클래스의 코드를 확장하고, 자동으로 관찰 가능한 상태와 상태 업데이트를 위한 액션을 생성합니다.

4. MobX 상태 사용하기

이제 MobX 상태 클래스를 사용하여 플러터(Flutter) 앱에서 상태 관리를 할 수 있습니다. 예를 들어 다음과 같이 MobX 상태를 사용하는 Counter 위젯을 만들어보겠습니다.

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

import 'counter.dart';

class CounterWidget extends StatelessWidget {
  final Counter counter = Counter();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MobX Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Observer(
              builder: (_) => Text(
                'Count: ${counter.count}',
                style: TextStyle(fontSize: 24),
              ),
            ),
            SizedBox(height: 16),
            RaisedButton(
              onPressed: counter.increment,
              child: Text('Increment'),
            ),
            RaisedButton(
              onPressed: counter.decrement,
              child: Text('Decrement'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 예제에서는 CounterWidget이라는 위젯을 정의하고, Counter 클래스의 인스턴스를 생성하여 사용합니다. Observer 위젯을 사용하여 상태의 변경을 감지하고, 해당되는 UI를 업데이트합니다. 또한, RaisedButton 위젯을 사용하여 increment와 decrement 액션을 호출합니다.

5. 실행 및 테스트

이제 앱을 실행하고 MobX 상태 관리가 제대로 작동하는지 확인해보세요. 상태 클래스의 count 값이 증가 또는 감소하면 UI가 자동으로 업데이트되는 것을 확인할 수 있을 것입니다.

flutter run

이상으로, MobX를 사용하여 플러터(Flutter) 앱에서 상태 관리를 구현하는 방법에 대해 알아보았습니다.

더 자세한 내용은 MobX 레퍼런스를 참고하시기 바랍니다.