Flutter Abuse of global variables

Abuse of global variables

전역 변수의 남용: static 변수를 이용한 전역 상태 관리는 간단하지만, 유지보수가 어렵고 의도치 않은 버그를 초래할 수 있습니다. 특히, 여러 위젯이 같은 변수를 공유하면 값 변경 시 UI가 자동으로 업데이트되지 않습니다.

---

StatefulWidget에서 전역 변수 값 변경 및 적용 방법 (How to change and apply global variable values ​​in StatefulWidget)

전역 변수를 변경할 때, UI가 업데이트되도록 하는 방법에는 여러 가지가 있습니다.

1. setState를 활용한 방법(How to use setState)

전역 변수 값을 변경한 후 setState()를 호출하여 화면을 갱신할 수 있습니다.

import 'package:flutter/material.dart';

class MainApp {
  static String name = '';
  static int cnt = 0;
}

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  void _increment() {
    setState(() {
      MainApp.cnt++; // 전역 변수 값 증가
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('전역 변수 사용 예제')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('전역 변수 값: ${MainApp.cnt}', style: TextStyle(fontSize: 24)),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _increment,
                child: Text('증가'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

✅ setState()를 사용하여 MainApp.cnt 값이 변경될 때 UI가 갱신되도록 합니다.

---

2. ChangeNotifier + Provider 사용 (권장) (Use ChangeNotifier + Provider (recommended))

보다 좋은 방법은 ChangeNotifier와 Provider를 사용하는 것입니다.

1️⃣ 전역 상태 관리 클래스 생성

import 'package:flutter/material.dart';

class CounterProvider extends ChangeNotifier {
  int _cnt = 0;
  int get cnt => _cnt;

  void increment() {
    _cnt++;
    notifyListeners(); // 상태 변경 알림
  }
}

2️⃣ 메인 앱에서 Provider 설정

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_provider.dart'; // 위에서 만든 상태 관리 파일 import

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

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

3️⃣ UI에서 상태 사용

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

    return Scaffold(
      appBar: AppBar(title: Text('Provider 사용 예제')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('전역 변수 값: ${counter.cnt}', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: counter.increment,
              child: Text('증가'),
            ),
          ],
        ),
      ),
    );
  }
}

✅ Provider를 사용하면 setState() 없이도 UI가 자동으로 업데이트됩니다.

---

결론

• 전역 변수를 static으로 선언하고 setState()를 사용하는 것은 간단하지만 유지보수에 불리합니다.
• Provider를 사용하면 코드가 더 구조적이고 유지보수가 쉬워집니다.
• 작은 프로젝트에서는 setState()로도 충분하지만, 상태 관리가 중요한 경우 Provider를 활용하는 것이 좋습니다.