이 프로젝트는 Youtube '개발하는남자'의 'GetX 주요 기능 3가지 중 그 첫번째 Route 관리 #2' 강의를 참고했습니다.

---

반응형 상태관리

단순 상태관리에 이어서 반응형 상태관리에 대해서 알아볼거에요.

반응형 상태관리는 GetxController extends를 하지 않아도돼요.
대신 하나하나의 변수에 obs를 넣어줘서 listening을 해요.

더군다나 method 내에서 update() 도 필요가 없어요.
오로지 obs만 지켜보겠다는.. 식인것같아요.

obs를 설정해줄 때 변수 type이 좀 생소해요.
Getx의 독자적인 data type인데 종류는 다 기본적인것은 모두 동일해요.
RxList, RxString, RxDouble....

여기선 정수를 다룰것이기 때문에 RxInt를 쓸게요.

count_controller_with_reactive.dart

import 'package:get/get.dart';

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

controller를 설정해줬으니 실제로 사용하는 곳에 인스턴스를 만들어야 해요.
인스턴스는 단순 상태관리와 동일하게 Get.put() 으로 생성해줘요.

    Get.put(CountControllerWithReactive());

단순 상태관리는 GetBuilder를 사용했다면 반응형은 두 가지 방법이 있어요.

Obx

먼저 Obx를 사용한 text 출력을 해볼게요.
obs를 설정한 변수에 변화가 생긴다면 Obx는 그 변화를 감지해요.

 Obx(() => Text(
                  '${Get.find<CountControllerWithReactive>().count.value}',
                  style: TextStyle(fontSize: 50),
                )),

GetX

Obx말고 GetX를 이용한 text 출력이에요.
이 방법이 Obx보다 아주 살짝 코드가 길어지기 때문에 Obx를 많이 쓰는 편이에요.

            GetX(
              builder: (_) {
                return Text(
                  '${Get.find<CountControllerWithReactive>().count.value}',
                  style: TextStyle(fontSize: 50),
                );
              },
            ),

obs value change

obs로 설정한 값을 임의의 값으로 바로 변경해주는 기가막힌 방법이 있어요.
RxInt 로 설정한 변수에 value를 넣어줘요.

int 변수가 마치 method 처럼.. 변하는 것같아요.

class CountControllerWithReactive {
  RxInt count = 0.obs;
  
  void putNumber(int value) {
    count(value);
  }
}

단순상태관리와 반응형 상태관리

단순 상태관리와 반응형 상태관리는 아주 중요한 차이점이 있어요.
단순 상태관리는 설정한 값이 변하든 변하지 않든 무조건 호출이 돼요.

하지만 반응형 상태관리는 값이 변해야 호출이 이루어져요.

위의 예를 들어보면
value를 5로 설정해주는 method를 만들었을 때,

단순 상태관리는 method를 실행시킬 때마다 무조건 호출이 이루어지는 반면,
반응형 상태관리는 method를 실행시켜도 값이 변하지 않는다면(즉, value값이 이미 5인데도 버튼을 계속 누른다면) 재호출은 이루어지지않아요.

onInit

반응형 상태관리에서는 onInit method 사용이 가능해요.
(onReady, onClose 도 가능!)

onInit을 사용하기 위해 class를 extends GetxController 처리를 해줘야 해요.

obs로 설정한 변수를 관찰하면서

'그 변수의 값이 변경될 때에만'

onInit 내부 method가 호출돼요.
내부 method 종류로는 아래코드를 보면 알 수 있을거에요.

import 'package:get/get.dart';

class CountControllerWithReactive extends GetxController {
  RxInt count = 0.obs;
  void increase() {
    count++;
  }

  void putNumber(int value) {
    count(value);
  }

  @override
  void onInit() {
    ever(count, (_) => print('항상 호출'));
    once(count, (_) => print('한번만 호출'));
    debounce(count, (_) => print('마지막 변경에 한번만 호출'), time: Duration(seconds: 1));
    interval(count, (_) => print('변경되고 있는 동안 1초마다 호출'),
        time: Duration(seconds: 1));
    super.onInit();
  }
}

단순형보다는 반응형이 기능이 더 많고 간단하게 느껴져서
개인적으로 반응형을 많이 쓰게 될 것 같아요. 👏🏻