[flutter] 플러터에서의 상태 관리 패턴은 무엇인가요?
Provider 패턴은 데이터를 관리하고 필요한 곳에 데이터를 제공하는 동시에 UI를 업데이트할 수 있는 강력한 기능을 제공합니다. 코드의 재사용성과 유지보수성을 향상시키며, 코드를 보다 간결하고 직관적으로 작성할 수 있도록 도와줍니다.
아래는 Provider 패턴을 사용한 예시 코드입니다.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),
),
);
}
class Counter with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter State Management with Provider')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:'),
Consumer<Counter>(
builder: (context, counter, child) => Text(
'${counter.count}',
style: Theme.of(context).textTheme.headline4,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Provider.of<Counter>(context, listen: false).increment();
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}
}
위 코드에서는 ChangeNotifier를 이용해 Counter 클래스를 만들고, ChangeNotifierProvider로 해당 클래스를 감싸 앱 전체에서 상태를 공유할 수 있도록 합니다. 이후 Consumer와 Provider.of를 이용해 해당 상태를 구독하고 변경할 수 있습니다.
이와 같은 방식으로 Provider 패턴을 통해 간단하게 상태를 관리하고, 필요한 곳에 데이터를 제공할 수 있습니다.
참고 문헌:
- https://pub.dev/packages/provider
- https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple
- https://flutter.dev/docs/development/data-and-backend/state-mgmt/other