최신 Riverpod tools 및 권장 가이드라인

이재영·2025년 1월 12일
0

최신 Riverpod의 가이드라인에 따르면, 이전의 ChangeNotifier, StateNotifier 및 이들과 관련된 ChangeNotifierProvider, StateNotifierProvider, StateProvider는 더 이상 권장되지 않는다.


권장되지 않는 Legacy tools ⛔️

  • ChangeNotifier ChangeNotifierProvider
    Flutter의 기존 ChangeNotifier 사용하던 방식으로, 이제 Riverpod의 Notifier 기반 도구들로 대체되었습니다.

  • StateNotifierStateNotifierProvider
    - 상태 관리 로직을 캡슐화하는 도구로 사용되었으나, Notifier 관련 도구가 동일한 기능을 더 단순하게 제공합니다.

  • StateProvider
    단순한 상태 관리를 위해 사용되었지만, 이제 NotifierProvider를 사용하여 동일한 기능을 구현할 수 있습니다.


사용할 최신 riverpod tools ✅

  • Provider : 단순히 상태를 제공할 때 사용.

  • NotifierProvider : 동기적 상태 관리 및 로직 처리를 위해 사용.

  • FutureProvider : 비동기 Future 데이터를 제공할 때 사용.

  • StreamProvider : 실시간 Stream 데이터를 제공할 때 사용.

  • AsyncNotifierProvider : 비동기 상태 관리 및 로직 처리를 위해 사용.

  • StreamNotifierProvider : Stream 기반 상태와 관련 로직을 관리하기 위해 사용.




코드 비교 📌

동기 상태 관리 📌

ChangeNotifier(Provider), StateNotifier(Provider) → → → Notifier(Provider)

변경 전

class Counter extends ChangeNotifier {
  int value = 0;

  void increment() {
    value++;
    notifyListeners();
  }
}

final counterProvider = ChangeNotifierProvider((ref) => Counter());


------------------------------ OR ---------------------------------------


class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() => state++;
}

final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());

변경 후

class CounterNotifier extends Notifier<int> {
  
  int build() => 0;

  void increment() => state++;
}

final counterProvider = NotifierProvider<CounterNotifier, int>(() => CounterNotifier());


비동기 상태 관리 📌

StateNotifier(Provider) → → → AsyncNotifier(Provider)

변경 전

class AsyncCounterNotifier extends StateNotifier<AsyncValue<int>> {
  AsyncCounterNotifier() : super(const AsyncValue.data(0));

  Future<void> incrementAsync() async {
    state = const AsyncValue.loading();
    await Future.delayed(const Duration(seconds: 1));
    state = AsyncValue.data(state.value! + 1);
  }
}

final asyncCounterProvider =
    StateNotifierProvider<AsyncCounterNotifier, AsyncValue<int>>(
  (ref) => AsyncCounterNotifier(),
);

Widget build(BuildContext context, WidgetRef ref) {
  final state = ref.watch(asyncCounterProvider);

  return state.when(
    data: (count) => Text('Count: $count'),
    loading: () => CircularProgressIndicator(),
    error: (err, stack) => Text('Error: $err'),
  );
}

변경 후

class AsyncCounterNotifier extends AsyncNotifier<int> {
  
  Future<int> build() async {
    return 0; // 초기 상태
  }

  Future<void> incrementAsync() async {
    state = const AsyncValue.loading();
    await Future.delayed(const Duration(seconds: 1));
    state = AsyncValue.data(state.value! + 1);
  }
}

final asyncCounterProvider =
    AsyncNotifierProvider<AsyncCounterNotifier, int>(() => AsyncCounterNotifier());

Widget build(BuildContext context, WidgetRef ref) {
  final state = ref.watch(asyncCounterProvider);

  return state.when(
    data: (count) => Text('Count: $count'),
    loading: () => CircularProgressIndicator(),
    error: (err, stack) => Text('Error: $err'),
  );
}



요약 📌

피해야 할 도구: ChangeNotifier, StateNotifier, StateProvider (및 관련 Provider들).

사용해야 할 도구: Provider, FutureProvider, StreamProvider, NotifierProvider, AsyncNotifierProvider, StreamNotifierProvider

profile
chmod 000

0개의 댓글