7강: Flutter 고급 상태 관리 – Provider와 상태 공유하기
앞서 우리는 Stateful 위젯을 사용하여 기본적인 상태 관리 기법을 배웠어. 하지만 앱이 커질수록 setState() 만으로는 모든 상태를 관리하는 것이 비효율적이고 복잡해질 수 있어. 특히 여러 위젯이 같은 상태를 공유해야 하거나, 계층 구조가 깊어질 때는 더욱 그렇지. 이때 Flutter의 고급 상태 관리 솔루션인 Provider를 사용하면 쉽게 문제를 해결할 수 있어.
이번 강의에서는 Provider를 통해 상태를 공유하고 관리하는 방법을 배워볼 거야. Provider는 Flutter에서 가장 널리 사용되는 상태 관리 도구 중 하나로, 간단하면서도 강력한 기능을 제공해.
Provider란 무엇인가?
Provider는 Flutter에서 상태를 관리하고 다른 위젯과 공유하기 위한 패키지야. Google이 공식적으로 추천하는 상태 관리 솔루션 중 하나이기도 해. Provider를 사용하면 트리 구조가 깊은 Flutter 앱에서도 상태를 쉽게 전달하고, 필요한 위젯에서 상태를 접근할 수 있어.
Provider는 주로 다음과 같은 경우에 사용해:
- 여러 위젯에서 동일한 상태를 공유해야 할 때.
- 상태의 변경을 효율적으로 처리하고 UI를 업데이트해야 할 때.
Provider 사용 준비하기
Provider를 사용하기 위해서는 pubspec.yaml 파일에 provider 패키지를 추가해야 해.
- Provider 패키지 추가:
pubspec.yaml파일에 다음 내용을 추가해:
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0그런 다음, 터미널에서 flutter pub get을 실행하여 패키지를 설치해.
간단한 Provider 예제 – 카운터 앱
이제 Provider를 사용해서 카운터 앱을 만들어보자. 버튼을 눌렀을 때 숫자가 증가하는 간단한 예제지만, 이번에는 상태를 Provider로 관리해볼 거야.
- Counter 클래스 만들기
먼저, 상태를 관리할 간단한 클래스를 만들어 보자:
import 'package:flutter/foundation.dart';
class Counter with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}여기서 ChangeNotifier를 사용하여 상태가 변경될 때마다 Provider가 UI를 업데이트하도록 해줘. notifyListeners() 메소드를 호출하면 이 상태를 구독하고 있는 모든 위젯들이 재빌드 돼.
- Provider 설정하기
이제main.dart파일에서 Provider를 설정해보자:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterScreen(),
);
}
}여기서 ChangeNotifierProvider는 Counter 인스턴스를 생성하고, 이 상태를 앱의 하위 위젯들에 제공해줘.
- 상태 사용하기
이제 UI에서 이 상태를 사용해보자.CounterScreen을 만들어 상태를 화면에 표시하고, 버튼을 눌렀을 때 상태를 업데이트해보자:
class CounterScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final counter = Provider.of<Counter>(context);
return Scaffold(
appBar: AppBar(
title: Text('Provider Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pressed the button this many times:'),
Text(
'${counter.count}',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: counter.increment,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}여기서 Provider.of<Counter>(context)를 사용하여 Counter 인스턴스를 가져와 현재 상태(count)를 읽고 버튼이 눌릴 때마다 increment() 함수를 호출해.
상태 관리의 확장성
Provider는 작은 앱에서부터 대규모 프로젝트까지 상태를 관리하는 데 매우 유용해. 특히 Provider는 다른 상태 관리 솔루션들과도 쉽게 통합될 수 있어서 앱의 구조를 확장하거나 상태 관리 방법을 변경하는 데 유연성을 제공해. 또한 Selector와 같은 기능을 사용하면 특정 부분의 상태 변화만 감지하도록 최적화할 수 있어.
Flutter에서는 Provider 외에도 Bloc, Redux, Riverpod 등 다양한 상태 관리 패키지가 있어. 각 솔루션마다 장단점이 있으므로, 앱의 성격과 규모에 맞는 적절한 도구를 선택하는 것이 중요해.
마무리
이번 강의에서는 Flutter에서 상태를 효율적으로 관리하기 위한 Provider에 대해 배웠어. Provider는 코드의 복잡성을 줄이고, 앱의 상태를 보다 체계적으로 관리할 수 있도록 도와주는 강력한 도구야. 다음 강의에서는 더욱 복잡한 상태 관리 기법과 Consumer와 MultiProvider 같은 고급 기능들을 다루며 Flutter의 상태 관리에 대해 더 깊이 탐구해 볼 거야. 계속해서 함께 성장해 나가자!