[Flutter] GetX 상태관리: 반응형 프로그래밍

지금까지 StatefulWidget → MVVM ChangeNotifier → Provider 순으로 상태관리를 공부해봤는데

이번에는 GetX 라이브러리를 통해 반응형 프로그래밍을 경험해보고, 상태관리가 얼마나 간단해질 수 있는지 알아보겠습니다!

이전 방식들의 공통된 아쉬움

Provider까지의 패턴들

// ChangeNotifier 기반 (MVVM, Provider 공통)
class CounterViewModel extends ChangeNotifier {
  int count = 0;
  
  void countUp() {
    count = count + 1;
    notifyListeners(); // 🤔 이걸 매번 호출해야 함
  }
  
  void countDown() {
    count = count - 1;
    notifyListeners(); // 🤔 깜빡하면 UI 업데이트 안됨
  }
}

// UI에서 사용
Consumer<CounterViewModel>(
  builder: (context, viewModel, child) {
    return Text('${viewModel.count}'); // 🤔 builder 함수 필요
  }
)

 

공통된 불편함들:

1. notifyListeners() 강제: 매번 수동으로 호출해야 함
2. Builder 패턴: Consumer, ListenableBuilder 등의 래퍼 필요

GetX : 반응형 프로그래밍

GetX는 반응형 프로그래밍(Reactive Programming) 개념을 Flutter에 도입합니다.

핵심 아이디어

데이터가 변경되면 → 자동으로 → UI가 업데이트

"데이터의 변화를 감지해서 자동으로 UI를 업데이트해주는" 경험을 제공합니다.

코드 분석: GetX

Controller: .obs의 역할

class GetXCounterController extends GetxController {
  // 데이터 (.obs = Observable)
  var count = 0.obs; // 관찰 가능한 변수로 선언
  
  // ⚡ 로직
  void countUp() {
    print('GetXCounterController - countUp count: $count');
    count = count + 1; // notifyListeners() 호출 불필요!
  }
  
  void countDown() {
    print('GetXCounterController - countUp count: $count');
    count = count - 1; // 자동으로 UI 업데이트됨!
  }
}

핵심 변화:

• .obs: 변수를 관찰 가능하게 만듦
• 자동 알림: 값이 변경되면 자동으로 구독자들에게 알림
• notifyListeners() 제거: 더 이상 수동 호출 불필요

View: 컨트롤러 등록과 사용

class GetxCounterHomePage extends StatelessWidget {
  GetxCounterHomePage({super.key});
  
  // 컨트롤러 등록
  final GetXCounterController controller = Get.put(GetXCounterController());
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Counter App')),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            spacing: 10,
            children: [
              // Obx: 반응형 위젯
              Obx(() => Text(
                'Counter.count : ${controller.count}',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
              )),
              ElevatedButton(
                onPressed: () {
                  controller.countUp(); // 단순한 메서드 호출
                },
                child: Text('카운트 증가'),
              ),
              ElevatedButton(
                onPressed: () {
                  controller.countDown();
                },
                child: Text('카운트 감소'),
              ),
            ],
          )
        ),
      ),
    );
  }
}

핵심 변화:

• Get.put(): 컨트롤러를 GetX 시스템에 등록
• Obx(): 반응형 위젯, 내부 변수 변경 시 자동 리빌드
• 직접 접근: controller.count로 간단하게 접근

main.dart: GetMaterialApp

void main() {
  runApp(GetMaterialApp(home: GetXCounterApp()));
}

변화:

• MaterialApp → GetMaterialApp: GetX 기능 활성화
• Provider 설정 불필요: 별도 Provider 래핑 없음

이전 방식들과의 비교

상태 변수 선언

// ChangeNotifier/Provider: 일반 변수 + 수동 알림
class CounterViewModel extends ChangeNotifier {
  int count = 0; // 일반 변수
  
  void countUp() {
    count++;
    notifyListeners(); // 수동 호출 필요
  }
}

// GetX: 관찰 가능한 변수 + 자동 알림
class GetXCounterController extends GetxController {
  var count = 0.obs; // 관찰 가능한 변수
  
  void countUp() {
    count++; // 자동으로 알림
  }
}

UI 업데이트

// Provider: Builder 패턴 필요
Consumer<CounterViewModel>(
  builder: (context, viewModel, child) {
    return Text('${viewModel.count}');
  }
)

// GetX: 간단한 Obx 래핑
Obx(() => Text('${controller.count}'))

인스턴스 관리

// Provider: main.dart에서 설정
void main() {
  runApp(
    ChangeNotifierProvider<CounterViewModel>(
      create: (context) => CounterViewModel(),
      child: MyApp(),
    )
  );
}

// GetX: 사용하는 곳에서 바로 등록
class HomePage extends StatelessWidget {
  final controller = Get.put(GetXCounterController());
}

개발 속도

// 기존 방식: 5-6단계
// 1. ViewModel 생성
// 2. ChangeNotifier 상속
// 3. notifyListeners() 호출
// 4. Provider 설정
// 5. Consumer 래핑
// 6. UI 구성

// GetX: 3단계
// 1. Controller 생성 (.obs 변수)
// 2. Get.put()으로 등록
// 3. Obx()로 UI 래핑

마무리

GetX는 반응형 프로그래밍을 Flutter에서 쉽게 경험할 수 있게 해주는 라이브러리입니다.

GetX의 특징:

• .obs: 관찰 가능한 변수로 자동 알림
• Obx(): 반응형 UI 업데이트
• Get.put(): 간단한 의존성 등록

GetX는 "상태관리가 이렇게 간단할 수 있구나!"하는 라이브러리입니다.