mobx를 이용한 flutter 상태 관리

들어가며

상태 관리란 무엇일까요? 위키 설명을 따르자면 텍스트 필드 같은 여러개의 UI 컨트롤의 상태를 관리하는 것을 의미합니다.

예를 들자면, 회원 가입창에 이메일이 유효하면 전송 버튼이 활성화되고 유효하지 않으면 단추가 비활성화되는것 같은 상황은 상태에 따른 UI 컨트롤이 관리되는 경우입니다.

그래서 뭐가 다른건데?

사실 이래선 기존이랑 뭐가 다른지 알 수가 없습니다. 여기서는 flutter 를 예를 들어보도록 하겠습니다. flutter의 구성은 widget 들의 조합입니다. 최상위 root widget 에서 하위 widget 을 포함하는 전형적인 tree 구조를 가집니다.

버스 타요~

mobx 로 가즈아

라이브러리 설치

yaml
Copy
1dependencies:
2  mobx: ^0.3.7
3  flutter_mobx: ^0.3.2

다음에는 dev_dependencies 를 추가합니다.

yaml
Copy
1dependencies:
2  build_runner: ^1.6.7
3  mobx_codegen: 0.3.7

아래 명령어로 패키지를 설치합니다.

bash
Copy
1flutter packages get

store 를 추가합시다!

dart
Copy
1import 'package:mobx/mobx.dart';
2
3// Include generated file
4part 'counter.g.dart';
5
6// This is the class used by rest of your codebase
7class Counter = _Counter with _$Counter;
8
9// The store-class
10abstract class _Counter with Store {
11  @observable
12  int value = 0;
13
14  @action
15  void increment() {
16    value++;
17  }
18}

기존 js 에서와 달리 build_runner 로 통해 코드를 생성되게 됩니다. (webpack 인가봐요) part 지시자를 통해서 추상 클래스가 변활될 파일들을 지정하게 됩니다.

아래 명령어를 통해 counter.g.dart 파일을 생성합니다.

bash
Copy
1flutter packages pub run build_runner build

widget 에 store 를 연결합시다.

dart
Copy
1import 'counter.dart'; // Import the Counter
2
3final counter = Counter(); // Instantiate the store

생성된 카운터 클래스를 가져오고 선언합니다.

dart
Copy
1class MyHomePage extends StatelessWidget {
2  const MyHomePage();
3
4  @override
5  Widget build(BuildContext context) {
6    return Scaffold(
7      appBar: AppBar(
8        title: Text('MobX Counter'),
9      ),
10      body: Center(
11        child: Column(
12          mainAxisAlignment: MainAxisAlignment.center,
13          children: <Widget>[
14            Text(
15              'You have pushed the button this many times:',
16            ),
17            // Wrapping in the Observer will automatically re-render on changes to counter.value
18            Observer(
19              builder: (_) => Text(
20                    '${counter.value}',
21                    style: Theme.of(context).textTheme.display1,
22                  ),
23            ),
24          ],
25        ),
26      ),
27      floatingActionButton: FloatingActionButton(
28        onPressed: counter.increment,
29        tooltip: 'Increment',
30        child: Icon(Icons.add),
31      ),
32    );
33  }
34}

참조하시면 StatefuleWidget 을 더이상 사용하지 않는 것을 볼 수 있습니다. state 는 Counter store 에 보관되며, Observer Widget 를 통해 값을 렌더링하는 것이죠.

FloatingActionButton widget 클릭시 counter.increment action 을 호출하게 됩니다.

이제 끝이에요!

와 간단하게 counter 앱이 만들어졌어요!

후기

이번 내용은 뭔가 깊이가 없어서 아쉽습니다. 다음번에는 좀 더 쉽게 더 재미있게 풀어서 연재해보도록 하겠습니다.

감사합니다.

출처 및 참고

• state managent
• Understanding state management, and why you never will
• Reactive Programming - Streams - BLoC
• React에서 Mobx 경험기 (Redux와 비교기)
• mobx.pub