Flutter 상태 관리 가이드

Flutter에서는 상태 관리를 통해 UI와 데이터 간의 동기화를 효과적으로 처리할 수 있습니다.
이 글에서는 상태 관리의 기본 개념, 주요 방식, 그리고 실습 예제를 다뤄보겠습니다.

---

1. 상태 관리란?

상태 관리(State Management)는 앱의 상태(데이터와 UI)를 추적하고, 상태가 변경될 때 UI를 업데이트하는 과정을 의미합니다. Flutter에서는 상태 관리를 다양한 방법으로 구현할 수 있습니다.

---

2. 상태 관리의 종류

Flutter에서는 상태 관리 방식이 다양합니다. 간단한 앱에서는 기본적인 방식으로 충분하지만, 복잡한 앱에서는 구조적인 접근이 필요합니다.

2.1 StatelessWidget vs StatefulWidget

• StatelessWidget: 상태가 변하지 않는 위젯입니다.
  • 예: 단순한 텍스트 또는 아이콘.
• StatefulWidget: 상태가 변경될 수 있는 위젯입니다.
  • 예: 버튼 클릭, 입력 폼, 애니메이션 등.

2.2 주요 상태 관리 패턴

1. setState():
   • 가장 기본적인 상태 관리 방법.
   • 작은 규모의 앱이나 간단한 상태 변경에 적합.

   class CounterApp extends StatefulWidget {
     @override
     _CounterAppState createState() => _CounterAppState();
   }
   
   class _CounterAppState extends State<CounterApp> {
     int _counter = 0;
   
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Counter App'),
         ),
         body: Center(
           child: Text('Counter: $_counter'),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: _incrementCounter,
           child: Icon(Icons.add),
         ),
       );
     }
   }

2. Provider:
   • Google이 권장하는 상태 관리 패턴.
   • 의존성 주입(Dependency Injection)을 통해 상태를 효율적으로 관리.
   • 사용법:
     • provider 패키지를 추가합니다.

     dependencies:
       provider: ^6.0.0

     • Provider를 사용하여 상태를 관리합니다.

     import 'package:flutter/material.dart';
     import 'package:provider/provider.dart';
     
     void main() {
       runApp(
         ChangeNotifierProvider(
           create: (context) => CounterModel(),
           child: MyApp(),
         ),
       );
     }
     
     class CounterModel extends ChangeNotifier {
       int _counter = 0;
     
       int get counter => _counter;
     
       void increment() {
         _counter++;
         notifyListeners();
       }
     }
     
     class MyApp extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return MaterialApp(
           home: Scaffold(
             appBar: AppBar(
               title: Text('Provider Example'),
             ),
             body: Center(
               child: Consumer<CounterModel>(
                 builder: (context, counter, child) {
                   return Text('Counter: ${counter.counter}');
                 },
               ),
             ),
             floatingActionButton: FloatingActionButton(
               onPressed: () => context.read<CounterModel>().increment(),
               child: Icon(Icons.add),
             ),
           ),
         );
       }
     }

3. BloC (Business Logic Component):
   • 복잡한 앱에 적합한 상태 관리 방식.
   • Reactive Programming(Rx) 패턴 기반.
   • flutter_bloc 패키지를 사용하여 구현 가능.
4. GetX:
   • 간결하고 직관적인 상태 관리.
   • 코드의 양을 줄이고 빠른 상태 관리를 지원.

---

3. 상태 관리 비교

방식장점단점

setState	간단하고 빠른 구현	규모가 커질수록 관리가 어려움
Provider	Google 권장, 구조적이고 확장 가능	초기 설정이 필요
BloC	높은 재사용성과 유지보수성	학습 곡선이 다소 높음
GetX	쉬운 사용, 코드 간소화	너무 간단해서 큰 프로젝트에 부적합

---

4. 결론

Flutter에서 적절한 상태 관리 방법을 선택하는 것은 앱의 복잡도와 요구 사항에 따라 달라집니다.
작은 앱에서는 setState()가 충분하지만, 복잡한 앱에서는 Provider나 BloC 같은 구조적인 패턴을 고려해야 합니다.

다음 글에서는 Provider를 사용한 상태 관리 실습을 자세히 다뤄보겠습니다.

---

참고 자료

• Flutter 공식 문서: https://docs.flutter.dev/development/data-and-backend/state-mgmt
• Provider 패키지: https://pub.dev/packages/provider