목차
Riverpod란?
Riverpod는 플러터(Flutter)에서 상태관리를 위한 라이브러리 중 하나로, Flutter 팀에서 개발한 Provider 라이브러리의 개선된 버전입니다. Provider 라이브러리보다 구문이 간결하고 효율적인 상태관리를 제공합니다.
Riverpod 설치하기
pubspec.yaml 파일에 다음과 같이 riverpod 의존성을 추가합니다.
dependencies:
flutter_riverpod: ^1.0.0
dependencies 섹션에 플러터 라이버프로드 버전을 명시하고, 저장소를 업데이트합니다.
Provider 생성하기
Provider를 생성하기 위해서는 ProviderContainer를 사용해야 합니다. 다음은 간단한 CounterProvider 예제입니다.
import 'package:flutter_riverpod/flutter_riverpod.dart';
final counterProvider = Provider<int>((ref) => 0);
Provider를 생성할 때, <T>로 제네릭 타입을 지정하고, ref를 파라미터로 받는 함수를 사용합니다. ref는 Provider에 대한 참조를 제공하며, 이를 통해 Provider의 상태를 읽거나 변경할 수 있습니다.
Provider 사용하기
Provider를 사용하기 위해서는 Consumer 위젯을 사용해야 합니다. 다음은 CounterProvider를 사용한 예제입니다.
import 'package:flutter_riverpod/flutter_riverpod.dart';
class CounterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Consumer(
builder: (context, watch, child) {
final counter = watch(counterProvider);
return Text('$counter');
},
),
),
),
);
}
}
위 예제에서는 Consumer 위젯 내부에서 counterProvider를 참조하고 있습니다. watch 함수를 통해 Provider의 상태를 읽어올 수 있습니다.
Consumer 사용하기
Consumer 위젯은 Provider 상태가 변경될 때마다 새로 렌더링됩니다. StateNotifier와 같이 상태를 변경할 수 있는 Provider를 사용하고 싶다면, Consumer 대신 Consumer<StateNotifier>를 사용할 수 있습니다.
Consumer<StateNotifierProvider<CounterNotifier, Counter>>(
builder: (context, watch, child) {
final counter = watch(counterProvider);
final counterNotifier = watch(counterProvider.notifier);
return Column(
children: [
Text('$counter'),
ElevatedButton(
child: Text('Increment'),
onPressed: () => counterNotifier.increment(),
),
],
);
},
);
위 예제에서는 counterProvider는 StateNotifierProvider를 사용하여 생성된 Provider입니다. watch 함수를 통해 Provider와 Provider의 상태 변화를 모니터링하는 객체를 가져올 수 있습니다.
리스너 등록하기
Provider의 상태 변화를 감지하기 위해서는 ProviderContainer에 리스너를 등록해야 합니다. 다음은 ProviderContainer에 리스너를 등록하는 예제입니다.
final container = ProviderContainer();
void main() {
container.listen(counterProvider, (int counter) {
print('Counter: $counter');
});
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ProviderScope(
child: MaterialApp(
home: CounterApp(),
),
);
}
}
ProviderContainer의 listen 함수를 사용하여 Provider의 상태를 변경했을 때 호출될 콜백을 등록할 수 있습니다.
플러터 Riverpod의 장점
- 상태관리를 효율적으로 할 수 있습니다.
- 리액트 덕스(React Redux)와 유사한 구문을 사용하므로 익숙한 개발자는 쉽게 사용할 수 있습니다.
- 플러터 팀에서 개발하고 있으므로 안정성과 지속적인 업데이트가 보장됩니다.