[Flutter] Flutter의 상태관리 - GetX

0. GetX란?

Provider와 마찬가지로 상태관리를 위한 패키지다. Docs에서는 GetX는 생산성, 성능, 조직화의 3가지 기본 원칙을 가지고 있다고 말한다.

 

• 생산성
  • 쉽고 친숙한 구문 사용
  • 개발 시간을 아낄 수 있으며, 애플리케이션을 최대 성능으로 제공 가능
• 성능
  • 성능과 최소한의 리소스 소비에 중점을 둠
  • Streams나 ChangeNotifier을 사용하지 않음
• 조직화
  • 화면, 프레젠테이션 로직, 비지니스 로직, 종속성 주입 및 네비게이션 완전 분리 가능
  • 라우트간 전환을 하는 데에 context가 필요하지 않음
    • 위젯 트리에 독립적
  • inheritedWidget을 통해 컨트롤러/블록에 접근하는 데에 context 미필요
  • 다중 Provider를 통해 위젯 트리에서 컨트롤러, 모델, 블록으로 주입할 필요 없음
    • 자체 종속성 주입 기능 사용

Flutter 팀에서 권장하는 BLoC에서는 비지니스 로직과 시각 객체를 분리하고 있지만, GetX는 모든 로직을 분리한다.

종속성 주입과 라우트 또한 분리되며, 데이터 계층이 모두 분리되어 각 기능을 더욱 쉽게 찾을 수 있게 된다.

상태 관리를 사용할 경우, 상태 관리는 컴파일이 되며 GetX에서 제공하는 라우트만 사용할 경우에는 상태 관리가 따로 컴파일 되지 않는다.

 

1. GetX의 상태관리

GetX의 상태 관리 방법은 두 가지로 나누어진다. 단순 상태 관리와 반응 상태 관리로 나뉘는데, 반응형 상태 관리는 간결한 문법으로 값의 변경을 감지하여 재렌더링을 하며, 단순 상태 관리는 데이터와 변경되는 데이터가 같은 지에 대한 확인을 하지 않는다.

단순 상태 관리

import 'package:get/get.dart';

class SimpleController extends GetxController {
  int counter = 0;

  void increase() {
    counter++;
    update();
  }
}

 

단순 상태 관리를 위한 controller를 생성해 주었다. 이 controller는 counter라는 변수와 이 변수의 값을 1씩 증가시켜 주는 increase 함수를 소유하고 있다.

해당 함수 내에는 update라는 함수가 있는데, 이 함수는 controller가 바라보는 모든 코드에 업데이트를 알리는 역할을 하게 된다.

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

  @override
  Widget build(BuildContext context) {
    Get.put(SimpleController()); // controller 등록
    return Scaffold(
      appBar: AppBar(
        title: const Text("단순 상태관리"),
      ),
      body: Center(
        child: GetBuilder<SimpleController>( // 실시간 렌더링
          builder: (controller) {
            return ElevatedButton(
              child: Text(
                '현재 숫자: ${controller.counter}',
              ),
              onPressed: () {
                controller.increase();
              },
            );
          },
        ),
      ),
    );
  }
}

 

이제 만들어낸 controller를 사용해 보자.

controller를 사용하기 위해 Get.put()으로 controller를 등록해주면 GetBuilder() 아래에 있는 모든 위젯은 controller에서 변경되는 데이터를 실시간으로 감지하며 반영할 수 있게 된다.

만약 GetBuilder를 사용하고 싶지 않다면 Get.find<[Controller]>().[변수 or 함수]를 사용하면 상태 관리가 가능하다.

반응 상태 관리

import 'package:get/get.dart';

class ReactiveController extends GetxController {
  RxInt counter = 0.obs;

  void increase() {
    counter++;
  }
}

 

반응 상태 관리를 위한 Controller를 생성한다.

위와 동일하게 counter라는 변수와 해당 변수의 값을 1씩 증가시키는 함수를 만들어 준다.

대신 단순 상태 관리와 변수를 선언하는 방식과 업데이트 함수의 형태가 다르다.

변수 선언은 변수 타입을 RxInt, RxString 등과 같이 Rx를 붙이게 되며, 변수의 값 뒤에는 .obs를 붙여주게 된다.

이렇게 선언한 변수는 update 함수가 없어도 무관하다.

 

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

  @override
  Widget build(BuildContext context) {
    Get.put(ReactiveController()); // 반응형 상태 관리 controller 등록
    return Scaffold(
      appBar: AppBar(
        title: const Text("단순 / 반응형 상태관리"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GetX<ReactiveController>( // 반응형 상태관리 - 1
              builder: (controller) {
                return ElevatedButton(
                  child: Text(
                    '반응형 1 / 현재 숫자: ${controller.counter.value}', // .value 로 접근
                  ),
                  onPressed: () {
                    controller.increase();
                    // Get.find<ReactiveController>().increase();
                  },
                );
              },
            ),
            Obx( // 반응형 상태관리 - 2
                  () {
                    return ElevatedButton(
                      child: Text(
                        '반응형 2 / 현재 숫자: ${Get.find<ReactiveController>().counter.value}', // .value 로 접근
                      ),
                      onPressed: () {
                        Get.find<ReactiveController>().increase();
                      },
                    );
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

controller를 사용하기 위해 동일하게 Get.put()으로 controller를 등록해준다.

 

여기서 데이터 실시간 반영하는 방법으로 두 가지가 있는데 GetX() - GetX() 방법과 Obx() - Obx() 방법이 있다.

 

- GetX() - GetX()

아래 모든 위젯이.controller에서 변경되는 데이터를 실시간으로 반영할 수 있는 상태가 되며, controller.counter.value와 같이 뒤에 .value를 붙여 사용해야 한다.

단순 상태 관리와 동일하게 GetX()를  사용하고 싶지 않다면 Get.find<[Controller]>().[변수 or 함수]를 사용하면 상태 관리가 가능하다.

 

- Obx() - Obx()

동일하게 아래 모든 위젯이 controller에서 변경되는 데이터를 실시간으로 반영할 수 있는 상태가 된다.

사용 방식은 거의 동일하지만 GetX()와 달리 controller에 이름을 지정할 수 없어 Get.find() 방식이 필수적이다.

 

또한, 반응 상태 관리에는 worker라는 추가적인 기능이 있다. controller 안에서 onInit() 함수를 override 한 후, 그 내부에서 사용하게 된다

• Ever: 매번 변경 시 실행
• Once: 처음 변경되었을 때만 실행
• Interval: 계속 변경이 있는 동안 특정 지정 시간 인터벌 후 실행
• Debounce: 인터벌이 끝난 후, 특정 지정 시간 이후 한 번만 실행

사용법은 아래와 같다.

import 'package:get/get.dart';

class ReactiveController extends GetxController {
  static ReactiveController get to => Get.find();
  RxInt counter = 0.obs;

  @override
  void onInit() {
    once(counter, (_) {
      print('once : $_이 처음으로 변경되었습니다.');
    });
    ever(counter, (_) {
      print('ever : $_이 변경되었습니다.');
    });
    debounce(
      counter,
          (_) {
        print('debounce : $_가 마지막으로 변경된 이후, 1초간 변경이 없습니다.');
      },
      time: Duration(seconds: 1),
    );
    interval(
      counter,
          (_) {
        print('interval $_가 변경되는 중입니다.(1초마다 호출)');
      },
      time: Duration(seconds: 1),
    );
    super.onInit();
  }


  void increase() {
    counter++;
  }
}

 

Get.find()를 좀 더 간단히 사용하는 방법도 있다.

• Getter 사용

class SimpleController extends GetxController {
  static SimpleController get to => Get.find();
  ...
 }

• GetView 사용
  Get.find()를 사용하는 클래스에 StatelessWidget 대신 GetView를 상속받는다.

class SimpleState extends GetView<SimpleController>{}

controller.increase();

---

참고

• https://dalgoodori.tistory.com/53

[Flutter] GetX ② - 상태 관리

• https://danawalab.github.io/flutter/2022/08/05/Flutter-Getx.html

Flutter - GetX를 이용한 상태관리

• https://velog.io/@knh4300/GetXdetail

GetX 에 대해 알아보자

• https://github.com/jonataslaw/getx/blob/master/README.ko-kr.md

getx/README.ko-kr.md at master · jonataslaw/getx

• https://pub.dev/packages/get#getview

get | Flutter package

• https://engineering.linecorp.com/ko/blog/flutter-architecture-getx-bloc-provider

Flutter 인기 아키텍처 라이브러리 3종 비교 분석 - GetX vs BLoC vs Provider