[Flutter] GetX - 상태관리

 개요

GetX는 Flutter에 고성능 상태 관리, 지능형 종속성 주입 및 빠르고 실용적인 라우터 관리가 결합되어 있는 라이브러리라고 설명한다.

테스트를 해보니 정말 많은 기능들을 제공한다. 가장 마음에 드는 것은 Flutter에서 제공하는 복잡한 코드들이 간결한 코드로 동일한 동작을 할 수 있도록 개발을 단순화했다는 것이다.

 

 본문

GetX 설치

flutter pub add get

프로젝트 터미널에서 flutter pub add get 명령어를 실행하여 pubspec.yaml에 디펜던시를 추가한다.

GetX 설정

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      ...
    );
  }
}

Flutter 프로젝트에서 GetX 기능들을 사용하기 위해서 main.dart 클래스 파일에 GetMaterialApp을 추가하여 글로벌 설정을 한다. 이 설정을 추가함으로 Get 기능들을 쉽게 사용할 수 있다.

상태 관리

Flutter에서 위젯들을 관리하기 위해 StatefulWidget나 StatelessWidget을 사용할 수 있고 자식 위젯들 이벤트에 대해 반응하고 상태가 변경되고 관리될 수 있도록 상태 관리하는 방식이다. Bloc이나 Provider 패턴과 같은 방식과 동일하여 GetX는 Controller라는 클래스로 Widget들의 상태 관리를 할 수 있도록 제공해주며 Bloc, Provider 보다 간단하게 구현할 수 있다는 장점이 있다.

GetX 상태 관리에서는 단순 상태 관리와 반응형 상태 관리 두 가지 기능을 제공한다.

1. 단순 상태 관리

class CountControllerWithGetX extends GetxController {
  int count = 0;
  void increase() {
    count++;
    update();
  }
}

• GetxController를 상속받은 Controller 클래스에 increase() 메서드가 실행되면 로직 처리 후 update() 함수로 Widget에 업데이트 상태를 알려준다.
• update() 함수는 Controller 상태 이벤트를 수신 등록을 한 Widget들이 상태가 변경에 대한 알림을 받을 수 있다.

class WithGetX extends StatelessWidget {
  const WithGetX({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
  Get.put(CountControllerWithGetX()); // Contoller DI 추가
    return Center(
      child: Column(
        children: [
          Text('GetX',style: TextStyle(fontSize: 50)),
          GetBuilder<CountControllerWithGetX>(
              builder: (controller) {
            return Text('${controller.count}',style: TextStyle(fontSize: 30));
          }),
          ElevatedButton(
              onPressed: (){
                Get.find<CountControllerWithGetX>().increase();
              },
              child: Text('+', style: TextStyle(fontSize: 30))
          ),


        ],
      ),
    );
  }
}

• Get.put(CountControllerWithGetX()); : Get.put()로 Controller 클래스를 인스턴스 화하여 모든 "child'에서 사용 가능하게 한다.

GetBuilder<CountControllerWithGetX>(builder: (controller) {
	return Text('${controller.count}',style: TextStyle(fontSize: 30));
}),

• 알림 받고자 하는 Child Widget은 GetBuilder로 contoller로부터 update()에 대한 이벤트를 수신하고 widget을 업데이트할 수 있다.
• Contoller에서 update()가 발생되면 GetBuilder로 구독하고 있는 Widget들은 모두 상태 변경이 일어난다.

2. 반응형 상태 관리

class CountControllerWithReactiveGetX {
  RxInt count = 0.obs;
  void increase() {
    count++;
  }
}

• 반응형 상태 관리는 단순 상태 관리처럼 GetxController를 상속을 하지 않아도 된다.
• 상태변화에 대한 변수는 RxInt처럼 Rx 리액티브 변수로 선언을 해주며 변수 값 뒤에. obs;를 정의해준다.
• Rx 리액티브 변수는 값이 변경되면 알아서 구독 중인 Widget에게 상태변화 이벤트를 전달하게 된다. 변수 변경에 따라 상태변화가 자동을 발생되므로 update() 함수는 사용하지 않는다.
• update()는 명령하면 Widget들은 강제로 이벤트를 받고 상태 변경을 진행해야 하지만 Rx 리액티브 변수는 이전과 동일한 값이 설정되면 Widget들에게 상태 변경에 대한 이벤트를 전달하지 않아서 효율이 좋다.

class _Test2State extends State<Test2> {
  @override
  Widget build(BuildContext context) {
    Get.put(CountContollerWithReactiveGetX());
    return Scaffold(
      appBar: AppBar(
        title: Text('반응형상태관리'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('GetX', style: TextStyle(fontSize: 50)),
            Obx(() => Text(
                '${Get.find<CountContollerWithReactiveGetX>().count.value}',
                style: TextStyle(fontSize: 30))),
            ElevatedButton(
                onPressed: () {
                  Get.find<CountContollerWithReactiveGetX>().increase();
                },
                child: Text('+', style: TextStyle(fontSize: 30))),
          ],
        ),
      ),
    );
  }
}

• Get.put(CountControllerWithGetX()); : 단순 상태 관리와 공통적으로 Get.put()로 Controller 클래스를 인스턴스 화하여 모든 "child'에서 사용 가능하게 한다.
• 반응형 상태 관리 이벤트는 Obx()로 전달받게 되고 Get.find로 Controller에 접근하여 데이터를 가져올 수 있다.

 

 마무리

GetX 상태 관리 기능을 가지고 뷰와 비즈니스 로직을 완전하게 분리했다. Bloc 패턴은 상태 관리 로직이 복잡도가 높아 진입장벽이 높게 느껴졌고 Provider 패턴은 GetX 상태 관리와 비슷하긴 하지만 비즈니스 로직을 담당하는 Provider 클래스가 context에 종속적이며 GetX보다 많은 코드가 발생된다. GetX 상태 관리는 context로부터 자유로우며 적용 코드도 매우 간단하다. 그리고 리액티브화 할 수 있는 기능도 큰 장점이라 생각된다.