[flutter] 플러터 Riverpod와 MobX의 비교

30 Nov 2023

flutter

이번 포스트에서는 플러터(Flutter) 앱 개발을 위한 상태 관리 라이브러리인 Riverpod과 MobX를 비교해보겠습니다. Riverpod와 MobX은 각각 독특한 기능을 가지고 있으며, 개발자가 상태 관리를 효율적으로 할 수 있도록 도와줍니다.

Riverpod

Riverpod은 플러터의 상태 관리를 위한 Provider 패턴의 대안으로 제공되는 라이브러리입니다. Riverpod은 상태를 네스팅하고 의존성 주입(Dependency Injection)을 편리하게 구현할 수 있는 기능을 제공합니다. Provider를 사용하여 전역 상태나 로컬 상태를 쉽게 관리할 수 있으며, 상태의 변경을 감지하여 UI를 자동으로 업데이트할 수 있습니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final countProvider = StateProvider<int>((ref) => 0);

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final count = watch(countProvider).state;

    return Scaffold(
      appBar: AppBar(
        title: Text('Riverpod Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count: $count',
              style: TextStyle(fontSize: 24),
            ),
            ElevatedButton(
              onPressed: () => context.read(countProvider).state++,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

MobX

MobX는 플러터 상태 관리를 위한 또 다른 인기있는 라이브러리입니다. MobX는 반응형 프로그래밍(Reactive Programming)의 개념을 기반으로 하며, 플러터 개발자들이 상태를 관리하고 의존성 주입을 할 수 있도록 도와줍니다. Observable을 사용하여 상태를 정의하고, 액션을 사용하여 상태를 변경할 수 있습니다. MobX는 상태의 변화를 감지하여 UI를 자동으로 업데이트할 수 있는 기능을 제공합니다.

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

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

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

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

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

비교 결과

사용의 편의성

Riverpod은 Provider 디자인 패턴을 기반으로 하고 있으며, 의존성 주입을 간단하게 처리할 수 있습니다. Riverpod을 사용하면 상태를 네스팅하고, 전역 상태나 로컬 상태를 쉽게 관리할 수 있습니다.

MobX는 반응형 프로그래밍에 기반을 두고 있으며, Observable과 액션을 사용하여 상태를 관리합니다. MobX를 사용하면 간편하고 직관적인 상태 관리를 할 수 있습니다.

성능

두 라이브러리 모두 상태의 변화를 감지하여 UI를 업데이트할 수 있습니다. 하지만 MobX는 내부적으로 자동으로 옵티마이저를 사용하여, 상태 변화가 없을 경우 UI를 업데이트하지 않습니다. 따라서 MobX는 Riverpod에 비해 약간의 성능 이점을 가지고 있습니다.

결론

Riverpod와 MobX은 모두 강력한 상태 관리 라이브러리로, 플러터 앱 개발에 유용합니다. Riverpod은 Provider 디자인 패턴을 사용하여 의존성 주입을 효율적으로 관리할 수 있고, MobX는 반응형 프로그래밍의 개념을 사용하여 상태 변화를 감지하고 업데이트합니다.

개발자는 자신의 프로젝트에 맞는 상태 관리 라이브러리를 선택할 수 있으며, Riverpod과 MobX의 비교를 참고하여 최적의 선택을 할 수 있습니다.

Riverpod

MobX

비교 결과

사용의 편의성

성능

결론

참고 자료