Flutter의 글로벌 상태 관리(Global State Management) 방법과 활용

Flutter의 글로벌 상태 관리(Global State Management) 방법과 활용

Flutter에서 상태 관리는 UI와 데이터의 일관성을 유지하는 중요한 요소입니다. 특히 글로벌 상태(Global State)를 효과적으로 관리하면 앱 전반에서 데이터를 쉽게 공유하고, 복잡한 UI 로직을 간결하게 유지할 수 있습니다.

이 글에서는 Flutter에서 글로벌 상태를 관리하는 다양한 방법을 소개하고, 각각의 장단점 및 사용 예제를 설명하겠습니다.

---

1. 글로벌 상태 관리란?

글로벌 상태 관리(Global State Management)는 앱의 여러 위젯에서 데이터를 공유할 수 있도록 상태를 관리하는 방식입니다.

글로벌 상태 관리가 필요한 경우:

• 사용자 인증: 로그인 상태를 앱 전체에서 공유할 때
• 테마 변경: 다크 모드/라이트 모드를 전역적으로 관리할 때
• 네트워크 데이터: API에서 가져온 데이터를 여러 화면에서 사용할 때

Flutter에서는 여러 가지 글로벌 상태 관리 방법이 있으며, 각 방법의 특징과 사용법을 살펴보겠습니다.

---

2. Flutter의 글로벌 상태 관리 방법

Flutter에서 글로벌 상태를 관리하는 대표적인 방법은 다음과 같습니다.

방법	설명	권장 사용 사례
Provider	Flutter 공식 권장 상태 관리 라이브러리	앱 전역 상태 관리 (테마, 로그인 상태 등)
Riverpod	Provider의 개선된 버전으로 더 간결하고 강력한 기능 제공	복잡한 상태 관리 (API 데이터, 캐싱 등)
GetX	간단한 API와 높은 성능을 제공하는 경량 상태 관리	빠르고 쉬운 상태 관리 (네비게이션, 다이얼로그, 글로벌 상태)
Bloc (Cubit)	이벤트 기반 상태 관리로 대규모 프로젝트에 적합	복잡한 상태 로직 (대형 앱, 멀티플 상태 관리)

---

3. Provider를 이용한 글로벌 상태 관리

provider 패키지는 Flutter에서 가장 널리 사용되는 상태 관리 방법 중 하나입니다.

(1) Provider 패키지 설치

flutter pub add provider

(2) 상태 클래스 생성

counter_provider.dart 파일을 생성합니다.

import 'package:flutter/material.dart';

class CounterProvider extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

(3) Provider 적용

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterProvider = Provider.of<CounterProvider>(context);

    return Scaffold(
      appBar: AppBar(title: Text("Provider 글로벌 상태 관리")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("카운트: ${counterProvider.count}", style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: counterProvider.increment,
              child: Text("증가"),
            ),
          ],
        ),
      ),
    );
  }
}

설명:

• ChangeNotifierProvider를 사용하여 상태를 앱 전역에서 관리
• notifyListeners()를 호출하면 UI가 자동으로 업데이트

---

4. GetX를 활용한 글로벌 상태 관리

get 패키지는 간단한 상태 관리와 라우팅을 제공하는 Flutter 라이브러리입니다.

(1) GetX 패키지 설치

flutter pub add get

(2) GetX 컨트롤러 생성

counter_controller.dart 파일을 생성합니다.

import 'package:get/get.dart';

class CounterController extends GetxController {
  var count = 0.obs;

  void increment() => count++;
}

(3) GetX를 적용한 UI

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'counter_controller.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final CounterController counterController = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("GetX 글로벌 상태 관리")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text("카운트: ${counterController.count}", style: TextStyle(fontSize: 24))),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: counterController.increment,
              child: Text("증가"),
            ),
          ],
        ),
      ),
    );
  }
}

설명:

• GetxController를 사용하여 상태를 간편하게 관리
• Obx()를 사용하여 상태 변경 시 UI 자동 업데이트
• 초기화 코드 없이 Get.put()를 사용하여 컨트롤러 등록

---

결론

Flutter에서 글로벌 상태 관리를 효과적으로 하면 앱의 구조가 간결해지고 유지보수가 쉬워집니다.

• Provider: 공식 권장 방식, 앱 전체 상태 관리
• GetX: 간단한 상태 관리, 빠른 성능
• Bloc: 복잡한 로직 관리에 적합

이제 적절한 상태 관리 방법을 선택하여 Flutter 앱을 더욱 효율적으로 개발해 보세요!