[Riverpod] Riverpod 상태관리

 

Flutter에는 많은 상태관리 패키지들이 존재한다. 

그 중 Riverpod에 대해서 알아보자.

 

Riverpod는 Provider의 anagram(철자 바꾸기)이다. 

Riverpod는 Flutter/Dart의 반응형 캐싱 프래임워크로 선언적 프로그래밍과 반응형 프로그래밍을 사용하여 애플리케이션 로직의 상당 부분을 처리한다.

 

 

https://riverpod.dev/ko/docs/introduction/getting_started

Getting started | Riverpod

설치

공식문서 상 아래와 같은 의존성들을 주입해주어야한다는데, 굳이? 다 필요한가 싶긴하다. 

예측일뿐 아직 뭐가 뭔지 모르니 우선 다 설치해주자.

flutter pub add flutter_riverpod
flutter pub add riverpod_annotation
flutter pub add dev:riverpod_generator
flutter pub add dev:build_runner
flutter pub add dev:custom_lint
flutter pub add dev:riverpod_lint

 

 

예제

간단한 Hello World 예제로 어떤 방식으로 Riverpod가 구성되는지 알아보자.

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

/// 'hello world'라는 값을 store하고 있는 provider
/// Provider를 사용하면 노출된 값을 모의/재정의할 수 있다.
/// Provider가 가지고 있는 매개변수를 store라고 한다.
final helloWorldProvider = Provider((ref) => 'hello world!');

void main() {
  runApp(
    /// 위젯이 Provider를 읽을 수 있도록
    /// 전체 앱을 ProviderScope 위젯으로 래핑
    /// 여기서 Provider의 상태가 저장된다.
    /// 
    /// 일반적으로 루트 위젯을 ProviderScope로 감싸서 하위 위젯트리에서 Provider객체에 접근할 수 있도록한다.
    /// 물론 루트 위젯을 감싸지 않고 사용할 수도 있다.
    const ProviderScope(
      child: App(),
    ),
  );
}

/// StatelessWidget 대신 Riverpod에 의해 노출되는 ConsumerWidget
///
/// ConsumerWidget은 StatefulWiget이 확장된 추상 클래스이다.
/// abstract class ConsumerStatefulWidget extends StatefulWidget {
/// ...
/// }
/// 
/// ConsumerWidget은 Provider 객체의 상태를 구독하고
/// 상태 변경이 있을 때마다 build를 호출하여 화면을 다시 그린다.
class App extends ConsumerWidget {
  const App({super.key});


  /// WidgetRef는 위젯 트리 내의 Provider 객체에 대한 참조를 제공한다
  /// 이를 통해 하위 위젯에서 Provider 객체를 생성하거나 액세스 할 수 있다.
  /// WidgetRef가 Provider객체에 엑세스하여 상태변경을 감지하면 현재 위젯에 다시 빌드 요청을 한다.
  /// 또한 WidgetRefsms context와 같은 역할을 해서 다른 위젯에서도 상태를 공유하는 역할을 한다.
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final value = ref.watch(helloWorldProvider);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("hi"),
        ),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

 

 

위의 주석과 같은식으로 처리된다