[Flutter] Riverpod 시작하기

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

 

리버팟의 공식문서에 따르면, 리버팟은 프로바이더를 개선한 반응형 캐싱(Reactive Caching) 및 데이터 바인딩(Data Binding) 프레임워크입니다. 리버팟의 공식 문서에 따르면 프로바이더 패키지의 개선하기 어려운 부분을 완전히 재작성하여 개선했습니다.

 

더 자세한 내용은 https://codewithandrea.com/articles/flutter-state-management-riverpod/에서 소개되는 리버팟의 v2.0 가이드라인을 참고하길 바랍니다.

🐇 Riverpod Install

url: https://pub.dev/packages/flutter_riverpod 경로를 확인하고 flutter_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

 

그럼 pubspec.yaml의 dependencies에 flutter_riverpod이 추가된 것을 확인할 수 있습니다.

이후 다음 명령문들로 마무리해줍니다.

flutter pub get
dart run build_runner watch

🥕 flutter pub get

flutter pub get 명령문은 flutter에 추가한 dependency들을 적용시키기 위해 필수적으로 실행해야 합니다.

 

🥕 dart run build_runner watch

dart run build_runner watch 명령문은 riverpod_generator가 코드 생성기를 실행하여 riverpod_annotation이 적용될 수 있도록 도와줍니다.

 

🍒 riverpod_generator

추후 generator로 생성된 part.d 파일을 import하여 사용하면 됩니다.

 

🍒 riverpod_lint

riverpod은 Lint 규칙을 제공합니다. 사용자 정의 리팩토링 옵션을 제공하는 선택적인 riverpod_lint패키지가 함께 제공됩니다.

riverpod을 install하는 과정에서 다음 명령문을 실행해주면 자동으로 활성화됩니다.

flutter pub add dev:riverpod_lint

그리고 analysis_options.yaml에 다음과 같이 추가해야 합니다.

analyzer:
  plugins:
    - custom_lint

이제 코드 베이스에서 riverpod을 사용할 때 실수를 한 경우, IDE에 경고가 표시될 수 있습니다!

 

🐇 riverpot start

🥕 ProviderScope

Widget이 Provider를 읽을 수 있도록, Provider가 Widget 전체를 감싸야합니다. 이 때, Widget에는 Provider의 상태가 저장될 수 있습니다.

runApp(
	ProviderScope(
		child: MyApp(),
	))

이제 우리는 Provider로 상태를 관리할 수 있는 상태가 됐기 때문에, 상속자로 StatelessWidget대신 ConsumerWidget을 사용해야 합니다.

 

ConsumerWidget에서는 WidgetRef의 instance인 ref를 통해 값이 저장된 Provider를 사용할 수 있습니다.

Provider에 값을 저장하는 코드부터 살펴보면 다음과 같습니다

@riverpod
String helloWorld(HelloWordRef ref) {
	return "hello world";
}

@riverpot annotaion을 통해 Provier임을 지정하고, 매개변수로 ClassName의Ref를 지정하여, 원하는 값을 리턴합니다. Provider는 전역으로 생성해도 riverpod이 알아서 찾아낼 수 있습니다.

 

이후 이 Provider를 ConsumerWidget에서 사용하기 위해선 다음과 같이 행동합니다.

class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

우리는 ref.watch()에 매개변수로 helloWordProvider를 호출합니다. ProviderScope는 @riverpod으로 선언된 helloWord를 찾아내 변동되는 값을 지속적으로 바라볼 수 있습니다.

 

모든 것을 완료하면 우리는 helloWorld에서 변경되는 모든 값을 이제 value에서 확인할 수 있습니다.

가장 중요한 키포인트는 다음과 같습니다

1. ProviderScope로 Widget 감싸기
2. @riverpod Provider 생성

매개변수는 ProviderName+Ref ref (ex, helloWord(HelloWorldRef ref)로,

1. ref.watch()

매개변수는 ProviderName+Provider (ex, helloWorldProvider)를 사용하여 컨벤션을 맞춰주는 것이 좋습니다.

🐇 Flutter Riverpod Snippet Extension

VS Code를 사용하는 경우 고려해볼 수 있습니다.

⚠️ Wait!

이 모든 내용과 관련된 코드 및 예제는 riverpod_annotation과 riverpod_generator을 사용하여 더 편리하게 마이그레이션 한 예제 입니다.

 

우리가 어느 기능을 쉽고 빠르게 사용하는 것도 중요하지만, 그 기능을 사용하기 전 정확히 파악하고 있는지가 중요하다고 생각합니다.

 

그래서 이 포스팅 이후 Provider에 대한 내용은 annotation과 generator를 사용하지 않은 riverpod 사용에 대해 서술해 나갈 것입니다.