[Flutter] Riverpod 뽀개기 (1)

 

앞의 글에서 상태관리의 필요성에 대해 알아보았는데 이번에는 그 중에서 Riverpod에 대해 알아보겠습니다.

Riverpod 

반응형 캐싱 및 데이터 바인딩 프레임워크입니다.
Riverpod는 비동기 코드로 작업하는 것을 쉬운 일로 만듭니다.

 

공식페이지에 접속하면 위 두 2문장으로 Riverpod을 소개하고있습니다.

 

하지만 Riverpod이전에 Provider가 존재합니다. 사용하기 쉽고 pub.dev에서 굉장히 사랑받고 있지만 이 Provider에도 근본적인 문제가 있습니다.

그래서 개발팀은 아래의 문제점 들을 제시하였고, 이 문제들을 해결한 Riverpod이라는 새로운 프레임워크를 개발하였습니다.

문제점

• 공급자가 동일한 유형의 두 개 이상의 공급자를 유지할 수 없습니다.
• 공급자는 한 번에 하나의 값만 배출합니다.
• 공급자를 결합하는 것은 어렵고 오류가 발생하기 쉽습니다.
• 안전성이 부족합니다.
• 상태를 Dispose시키는 것이 어렵습니다.
• 신뢰할 수 있는 매개변수화 메커니즘의 부재.테스트가 어렵습니다.
• 오류를 유발하는 것은 간단하지 않습니다.

 

실제로 Provider를 사용해보면서 느낀점이지만, 에러가 일어나는것을 캐치하는것은 런타임에 발생하고 컴파일 시점에서는 알 수 없다는게 어려웠습니다. 사용하기는 쉽지만 앱의 규모가 점점 커질수록 관리가 힘들어지고, 테스트하기에도 어려운 부분이 있습니다.

 

대표적인 예시로는 아래의 에러가 있습니다.(사용하신 많은 분들이 알고 있는...)

Provider Not Found Exception

위젯은 파란색, Provider는 하늘색으로 표시하였습니다.

 

Widget B,C는 ProviderA만 상속 받고 있고,Provider B는 상속 받고 있지않고 있습니다. 

하지만 Widget B,C가 상속 받지 않은 Provider B를 참조하게 된다면 기기에 빨갛게 변하면서 아래와 같은 에러를 뱉을것 입니다...

Could not find the correct Provider
Exception caught by widgets library
The following ProviderNotFoundException was thrown building ConsumerCounterdirty:
Error: Could not find the correct ProviderCounter above this ConsumerCounter Widget
This happens because you used a BuildContext that does not include the provider

 

이 에러는 런타임 시점에만 알 수 있는 에러있습니다. 

 

위의 근본적인 문제를 개선한 Riverpod은 아래와 같은 장점을 가진다고 소개됩니다.

장점

• 기본적으로 오류/로딩 상태 처리. 오류를 수동으로 잡을 필요가 없습니다
• 새로고침과 같은 기본적으로 지원되는 고급 시나리오
• UI에서 로직 분리
• 테스트 및 확장에 용이하며, 재사용 가능 합니다.

변경점

Provider

기존에는 ChangeNotifier를 통해 Provider를 선언하고, 해당 Provider를 해당 위젯위에 감싸주는 형식으로 선언되었습니다.

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

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

Riverpod

이제 Riverpod에서는 Provider가 전역으로 선언됩니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

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

  void increment() {
    state++;
  }
}

 

Riverpod에서 Provider의 종류 

• Provider
• Async(NotifierProvider)
• StateNotifierProvider
• FutureProvider
• StreamProvider
• StateProvider
• ChangeNotifierProvider