[Flutter] GetX를 사용해야할 이유2 - 상태관리

상태 관리

GetX의 상태관리와 비슷한 라이브러리로 Provider가 있다.

상태 관리는 ui등과 같은 부분에  특정 값의 변화를 특정 시점에 반영 및 상태를 알려줄 수있다.

 

GetX의 반응형 상태관리

GetX의 기능을 사용하여 간결한 문법으로 값의 변경을 리액티브하게 반영할 수 있다.

리액티브 변수 선언

class ReactiveController {
    RxInt num = 0.obs;
    RxDouble _double = 0.0.obs;
    RxString _string = "".obs;
    RxList<int> _list = [0].obs;
    Rx<Test> _object = Test(0, "").obs;
    
    
    // 값 변경
    void increaseValue() {
      num++;
      // == num(num.value+1);
    }
    
    // 객체의 내부의 값은 상태 변경 감지에 해당되지 않기때문에
    // update()를 통해 값을 변경하고 작업이 끝나면 변경된 값의 상태를 반영한다.
    void putNumber(int value) {
      _object.update((val) { 
	    // 변경 작업
      });
    }
}

다음과 같이 GetX의 리액티브한 변수를 선언할 수 있다.

상태 반영 

  @override
  Widget build(BuildContext context) {
    Get.put(ReactiveController());
    
    return Container(
      child: Obx(() {
          final controller = Get.find<ReactiveController>();
          return Text('${controller.num.value}');
        }),
    );
  }

값들은 변경이 되면 다음과 같이 Obx 안에서 상태를 반영해줄 수 있다.

Rx변수의 경우 일반적인 상태 관리에서의 반영과는 다른점이 있는데 

리액티브 변수의 값을 변경했을 때 값이 기존의 값과 같을 경우 변경 상태를 알리지 않는다.

GetxController의 생명주기 관리

class ReactiveController extends GetxController 
  ...
  
  @override
  void onInit() {
    // Controller 생성 시
    super.onInit();
  }

  @override
  void onClose() {
      // Controller 제거 시
    super.onClose();
  }
  
  @override
  void onReady() {
    // 1프레임 이후 (ui를 그리는 작업은 여기에)
    super.onReady();
  }
}

* 플러터에서 ui작업을 진행하기위해서는 렌더링 트리가 필요한데 onReady는  렌더링 트리가 완성된 후(1프레임) 에 실행되기때문에 다이얼로그나 스낵바 작업은 onReady에서 진행해야한다.

유용한 함수 (workers)

ever(num, (_) => print("$_ 상태 변경 시 마다 호출"));
once(num, (_) => print("$_ 첫 상태 변경 시 호출"));
debounce(num, (_) => print("$_ 지정 시간 내 마지막 값 호출"), time: const Duration(seconds: 1));
interval(num, (_) => print("$_ 상태 변경 시 지정 시간 간격으로 호출"), time: const Duration(seconds: 1));

GetX의 특별한 기능을 하는 worker이다.

지정한 값(예제에선 num)의 상태 변경을 감지하여 각 기능에 맞게 정의한 함수를 호출한다.

마찬가지로 같은 값으로 변경을 시도할 경우에는 호출이 되지않는다.