[Flutter] GetX - Simple, Reactive 방식 비교

Simple 방식

class MyController extends GetxController {

  final String appBar = '마이 페이지';

  int counter = 0;

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

 

Widget _buildGetBuilder() {
    return GetBuilder<MyController>(
        builder: (_) {
          print('-----------------_buildGetBuilder() builder');
          return Text(
            '${_.counter}',
            style: textStyleWhiteBold(50),
          );
        }
    );
  }

Widget _buildSimpleButton() {
    return InkWell(
      onTap: () {
        controller.increment();
      },
      child: Container(
        width: R.dimen[200],
        alignment: Alignment.center,
        padding: edgeInsetsDimen(all: 10),
        color: Colors.white,
        child: const Text('Simple Button'),
      ),
    );
  }

 

simple 방식 인 경우!

update 해주면 data가 바뀌지 않아도 계속 다시 그린다.

 

      print('-----------------_buildGetBuilder() builder');

 

이거 로그 계속 찍힘.  counter++; 이거 안해줘도 계속 다시 그림!

 

 

Reactive 방식

class MyController extends GetxController {

  final String appBar = '마이 페이지';

  RxInt rxCounter = 0.obs;

  void increment2() {
    rxCounter(5);
  }
}

 

Widget _buildObx() {
    return Obx(
        () {
          print('-----------------_buildObx() obx');
          return Text(
            '${controller.rxCounter.value}',
            style: textStyleWhiteBold(50),
          );
        }
    );
  }

Widget _buildReactiveButton() {
    return InkWell(
      onTap: () {
        print('----------------onTap');
        controller.increment2();
      },
      child: Container(
        width: R.dimen[200],
        alignment: Alignment.center,
        padding: edgeInsetsDimen(all: 10),
        color: Colors.grey,
        child: const Text('Reactive Button'),
      ),
    );
  }

 

일단 counter가 int이고 rxCounter++; 이거 해주면 값이 계속 바껴서

 

      print('-----------------_buildObx() obx');

 

로그가 찍히는 것을 확인할 수 있는데 rxCounter(5); 이거 해주면 처음에 값이 5로 바뀔때는 다시 그리는데 5인 상태에서 5로 또 바꿔주면 다시 안그리는거 확인가능!

 

 

그렇담. 데이터가 객체일때는?

 

 

 

class MyController extends GetxController {

  final String appBar = '마이 페이지';

  int counter = 0;

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

  RxInt rxCounter = 0.obs;

  void increment2() {
    rxCounter(5);
  }

  Rx<SampleData> rxSample = SampleData(1, 'joy').obs;

  void changeValue() {
    rxSample(SampleData(2, 'jiyeon'));
  }
}

 

class SampleData {
  int age;
  String name;

  SampleData(this.age, this.name);

  @override
  String toString() {
    return 'age $age, name $name';
  }
}

 

Widget _buildObx() {
    return Obx(
            () {
          print('-----------------_buildObx() obx');
          return Text(
            controller.rxSample.value.toString(),
            style: textStyleWhiteBold(50),
          );
        }
    );
  }

  Widget _buildReactiveButton() {
    return InkWell(
      onTap: () {
        print('----------------onTap');
        controller.changeValue();
      },
      child: Container(
        width: R.dimen[200],
        alignment: Alignment.center,
        padding: edgeInsetsDimen(all: 10),
        color: Colors.grey,
        child: const Text('Reactive Button'),
      ),
    );
  }

 

이때는 데이터가 객체라서 실제 변수값은 변하지 않았지만 인스턴스의 메모리 주소로 데이터를 비교하기 때문에

 

      print('-----------------_buildObx() obx');

 

계속 로그가 찍히는 것을 알 수 있다.

 

 

이때 데이터 클래스를

 

class SampleData extends Equatable {
  int age;
  String name;

  SampleData(this.age, this.name);

  @override
  String toString() {
    return 'age $age, name $name';
  }

  @override
  List<Object?> get props => [age, name];
}

 

Equatable 상속하는 클래스로 바꿔주면 변수값으로 비교하여

 

      print('-----------------_buildObx() obx');

 

로그가 더이상 찍히지 않는 것을 알 수 있다. 즉 다시 그리지 않는거지!