플러터(Flutter)는 크로스 플랫폼 모바일 앱 개발을 위한 인기 있는 프레임워크입니다. 플러터를 사용하면 하나의 코드베이스로 안드로이드 및 iOS 앱을 개발할 수 있습니다. 그러나 앱 개발에는 상태 관리가 필수적입니다. 상태 관리는 앱의 데이터 및 UI 상태를 효율적으로 관리하는 중요한 테크닉입니다.
이번에는 플러터와 함께 사용할 수 있는 최신 상태 관리 라이브러리인 Riverpod에 대해 알아보겠습니다. Riverpod는 플러터의 Provider 패턴을 기반으로 한 상태 관리 라이브러리로, 강력한 의존성 주입을 제공합니다.
Riverpod 기초
Riverpod을 사용하려면 flutter_riverpod
패키지를 추가해야 합니다. pubspec.yaml
파일에서 다음과 같이 추가해주세요:
dependencies:
flutter_riverpod: ^1.0.0
Riverpod은 Provider
클래스를 사용하여 값을 제공합니다. Provider
클래스는 다양한 방법으로 값을 생성하고 공유할 수 있는 기능을 제공합니다. 예를 들어, Provider.value
는 기존 객체를 제공하고, Provider.container
는 의존성 주입을 활용할 수 있습니다.
상태 값 제공하기
먼저 간단한 카운터 앱을 만들어보겠습니다. provider.dart
파일을 만들고 다음 코드를 추가해주세요:
import 'package:flutter_riverpod/flutter_riverpod.dart';
final counterProvider = Provider<int>((ref) => 0);
counterProvider
라는 이름의 Provider
를 생성했습니다. 여기서 0
은 초기 카운터 값을 의미합니다.
이제 main.dart
파일에서 counterProvider
를 사용해보겠습니다:
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ProviderScope(
child: MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Consumer(builder: (context, watch, _) {
final counter = watch(counterProvider);
return Text(
'$counter',
style: TextStyle(fontSize: 24),
);
}),
),
floatingActionButton: FloatingActionButton(
onPressed: () => context.read(counterProvider).state++,
child: Icon(Icons.add),
),
),
),
);
}
}
Consumer
위젯을 사용하여 counterProvider
의 값을 읽고, Text
위젯을 통해 카운터 값을 표시하고 있습니다. FloatingActionButton
을 통해 카운터를 증가시킬 수 있습니다.
상태 값 갱신하기
위의 예제에서 카운터를 증가시키는 부분을 살펴보겠습니다. context.read
를 사용하여 counterProvider
의 값을 갱신합니다. 이렇게 하면 상태 값이 변경되고 해당 변경사항이 UI에 자동으로 반영됩니다.
상태 값에 접근하기
Provider
클래스를 사용하여 생성한 값에 접근하려면 context.read
또는 watch
를 사용합니다. read
는 값을 읽어오기만 할 때 사용하고, watch
는 값을 감시하고 변경사항을 반영할 때 사용합니다.
종합
이제 플러터 앱에서 Riverpod을 사용하여 상태를 관리하는 기본적인 방법을 알게 되었습니다. Riverpod은 플러터 앱 개발을 더욱 쉽고 효율적으로 만들어주는 강력한 도구입니다.
더 자세한 내용은 Riverpod 공식 문서를 참조하세요.