그래도 한주의 절반을 해서 기분이 좋다,, 목금 아자아자...!
Riverpod
flutter 에서의 상태관리는 여러가지가 있다. Bloc, Provider, GetX 등등.. 오늘은 provider 기반으로 이루어진 riverpod을 사용해 보겠다.
간단하게 StateProvider 부터~
StateProvider
단순한 형태의 데이터만 관리한다. (int double String)
Map List 등 복잡한 데이터는 다루지 않으며, number ++ 정도의 간단한 로직으로만 한정된다.
직접 코드로 사용하기 전에
ref.watch 랑 ref.read 의 간단한 차이는
ref.watch 는 반환값의 업데이트가 있을때 지속적으로 build 함수를 다시 실행해주며, 필수적으로 UI 관련 코드에만 사용한다.
ref.read 는 실행하는 순간 단 한번만 provider 값을 가져오며, onPressed 콜백처럼 특정 액션 뒤에 실행되는 함수 내부에서 사용된다.
코드로 보겠다.
import 'package:flutter_riverpod/flutter_riverpod.dart';
final numberProvider = StateProvider<int>((ref) => 0);numberProvider 를 선언해주며 StateProvider 에다가 어떤 타입을 상태관리 할것 인지 타입을 넣어준다. 그리고 ref => 0 으로 초기값을 설정해준다.
provider 를 사용하기 위해서는 StatelessWidget 같은 위젯이 아닌 ConsumerWidget 바꿔줘야 한다.
class StateProviderScreen extends ConsumerWidget {
const StateProviderScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final provider = ref.watch(numberProvider);위에 언급한 것 처럼 ConsumerWidget 을 사용해주고
BuildContext 옆에 WidgetRef ref 를 하나더 받는다.
final provider = ref.watch(numberProvider);
구문을 확인하면 ref.watch 로 처음에 선언해준 numberProvider를 넣어주며 반환값의 업데이트가 있을때 지속적으로 build 함수를 다시 실행해준다.
사용 방법은 간단한다.
Center(
child: Text(provider.toString()),
),
ElevatedButton(
onPressed: () {
ref.read(numberProvider.notifier).update((state) => state + 1);
},
child: Text('Up'),
),결과 물이다.
provider.toString 으로 초기값을 노출 시킬수 있으며 onPressed 로
ref.read(numberProvider.notifier).update((state) => state + 1); 로 상태를 변경 할수있다. 프로젝트 내에서 해당 numberProvider 를 구독 하고 있으면 어디서든 반환값에 접근이 가능하다.
다음 포스팅에서는 StateNotifierProvider 를 사용하여, 복잡한 형태의 데이터는 다루는 것에 대해서 남겨보겠다.
