#2-2 GetX - 상태관리 : 반응형 상태 관리

 

GetX에는 단순 상태 관리 말고 반응형 상태 관리도 있다

반응형 상태 관리를 사용하게 되면 상태 관리에 대해 리소스를 아낄 수 있으며, 이름 그대로 반응적으로 상태를 관리할 수 있다.

예를 들어 age가 20이었는데 이를 20으로 바꾼다면 (age.value = 20) 기존의 value와 동일하기 때문에 화면에 아무 변화가 없다. 이때 반응형 상태 관리자는 리소스를 아끼기 위해 재빌드를 하지 않게 된다.

 

이해가 될 듯 말 듯 하니 천천히 살펴보자😐

 

📢observable한 변수

반응형 상태 관리를 위해서는 observable 변수라는 특별한 변수를 사용한다

observable 변수는 Rx라고도 부른다. Rx를 선언하는 방법에는 3가지가 있다.

 

1. Rx{Type}(value)

var count = RxInt(0);

2. Rx<Type>(value)

var count = Rx<int>(0);

3. value.obs

var count = 0.obs;

 

이 중 가장 단순하고 쉬운 value의 속성으로. obs를 붙이는 방법을 주로 사용한다.

 

Rx 값에 접근할 때는 일반 변수와는 다르게. value를 붙여줘야 접근할 수 있다.

주의할 점은 String, int와 같은 primitive type은. value를 붙여줘야 접근 가능하지만, List에서는. value 없이 접근할 수 있다는 것이다. 

 

📢Controller

// reactive_controller.dart

import 'package:get/get.dart';

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

  void increase() {
    count++;
  }
}

RxInt로 count를 만들고. obs를 달아준다.

단순 상태 관리와는 다르게 increase()에서 update()를 추가하지 않아도 된다.

📢Main

// main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getstudy/controller/reactive_controller.dart';
import 'package:getstudy/page/reactive_state.dart';

void main() {
  runApp(
    GetMaterialApp(
      home: MyApp(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    Get.put(ReactiveController());

    return Scaffold(
      appBar: AppBar(
        title: Text("GetX"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Get.to(() => ReactiveStateManager());
              },
              child: Text(
                "반응형 상태관리",
                style: TextStyle(
                  fontSize: 20,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

메인에서 build메소드 안에 아까 만든 controller를 등록한다

Get.put()을 통해 등록했기 때문에 어디서든 사용이 가능하다

 

 

반응형 상태 관리에서 값을 출력하기 위한 방법에는 두 가지가 있다.

📢ReactiveState - GetX()

// reactive_state.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getstudy/controller/reactive_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("반응형 상태관리"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GetX<ReactiveController>(
              builder: (controller) {
                return Text(
                  '${controller.count.value}',
                  style: TextStyle(fontSize: 50),
                );
              },
            ),
            ElevatedButton(
              onPressed: () {
                Get.find<ReactiveController>().increase();
              },
              child: Text("증가"),
            ),
          ],
        ),
      ),
    );
  }
}

먼저 GetX를 사용하는 방법이다.

이 방법은 코드가 다음 방법보다 아주 살짝 길어 주로 다음 방법을 많이 사용한다.

📢ReactiveState - Obx()

// reactive_state.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getstudy/controller/reactive_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("반응형 상태관리"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(
              () {
                return Text(
                  "${Get.find<ReactiveController>().count.value}",
                  style: TextStyle(
                    fontSize: 30,
                  ),
                );
              },
            ),
            ElevatedButton(
              onPressed: () {
                Get.find<ReactiveController>().increase();
              },
              child: Text("증가"),
            ),
          ],
        ),
      ),
    );
  }
}

. obs를 붙여준 변수에 변화가 생기면 Obs는 그 변화를 감지하게 된다.

 

 

count가 잘 증가하는 것을 확인할 수 있다✨

 

 

---

반응형 상태 관리에서만 사용할 수 있는 Workers라는 기능이 있다.

Rx의 상태 변화를 감지하고 각 상황별로 처리를 구현할 수 있다.

Workers는 Controller 혹은 클래스를 시작할 때만 사용할 수 있다. 따라서 항상 onInit 내에 있거나 (권장사항), 클래스 생성자, StatefulWidget의 initState 안에 (권장하진 않지만 부작용은 없음) 있어야 한다.

 

// reactive_controller.dart

import 'package:get/get.dart';

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

  void increase() {
    count++;
  }

  @override
  void onInit() {
    super.onInit();
    ever(count, (_) => print("변경될 때마다 호출"));
    once(count, (_) => print("처음으로 변경될때 호출"));
    debounce(count, (_) => print("변경되고 1초간 변화가 없을때 호출"),
        time: Duration(seconds: 1));
    interval(count, (_) => print("변경되고 있는 동안 1초 간격으로 호출"),
        time: Duration(seconds: 1));
  }
}

콘솔에 잘 나오는 것을 확인할 수 있다.