GetX 상태관리 정리

---

GetX란

GetX란 Provider와 같은 상태 관리 라이브러리이다.

GetX 환경 설정

• getx 라이브러리 import
  • https://pub.dev/packages/get

상태관리

GetX를 통한 상태관리 방식은 두가지가 있다.

1. 단순 상태 관리

• Controller

  import 'package:get/get.dart';
    
  class SimpleStateController extends GetxController {
    int count = 0;
    
    void increment() {
        count++;
        update();
    }
  }
    
  

• Builder

  Column(
      children [
          GetBuilder<SimpleStateController>(
              builder: (c) {
                  return Text('count' : '${c.count}');
              }
          )
          ElevatedButton(
              onPressed: () {
                  Get.find<SimpleStateController>().increment();
              }
              child: Text('Count Up!'),
          )
            
      ]
  )
    
  

• 하지만 이렇게만 하면 컨트롤러가 initiate가 안되었기 때문에 에러가 난다. GetX 컨트롤러 initiation 방법에는 두가지가 있다.

• Initiation 1 : GetBuilder 안에서 initiate

  Column(
      children [
          GetBuilder<SimpleStateController>(
              init: SimpleStateController(),
              builder: (c) {
                  return Text('count' : '${c.count}');
              }
          )
          ElevatedButton(
              onPressed: () {
                  Get.find<SimpleStateController>().increment();
              }
              child: Text('Count Up!'),
          )
            
      ]
  )
  

• Initiation 2 : Get.put() 사용

  @override
  Widget build(BuildContext context) {
      final controller = Get.put(SimpleStateController());
        
      ...
            
  }
  

  Column(
      children [
          GetBuilder<SimpleStateController>(
              // init: SimpleStateController(), init 안써도 됨
              builder: (c) {
                  return Text('count' : '${c.count}');
              }
          )
          ElevatedButton(
              onPressed: () {
                  controller.increment(); // controller라는 지정한 이름으로 사용 
              }
              child: Text('Count Up!'),
          )
            
      ]
  )
  

2. 반응형 상태 관리

• Controller

  import 'package:get/get.dart';
    
  class ReactiveStateController extends GetxController {
    RxInt count1 = 0.obs; 
    //RxInt 대신에 var 써도 됨
    //RxString, RxBool, 등 
    
      
  }
    
  

• Builder

  Column(
      children [
          GetX<ReactiveStateController>(
              builder:(c){
                  return Text('Count 1 : ${c.count1.value}') // primitive 타입일 때는 .value 필수
              } ,
          ),
          ElevatedButton(
              onPressed: () {
                  Get.find<ReactiveStateController>().count1++;
              }
              child: Text('Count Up!'),
          )
            
      ]
  )
  

• 반응형도 단순형과 마찬가지로 이렇게만 하면 컨트롤러가 initiate가 안되었기 때문에 에러가 난다. GetX 컨트롤러 initiation 방법에는 두가지가 있다.

• Initiation 1 : GetX안에서 initiate

  Column(
      children [
          GetX<ReactiveStateController>(
              init: ReactiveStateController(),
              builder:(c){
                  return Text('Count 1 : ${c.count1.value}') // primitive 타입일 때는 .value 필수
              } ,
          ),
          ElevatedButton(
              onPressed: () {
                  Get.find<ReactiveStateController>().count1++;
              }
              child: Text('Count Up!'),
          )
            
      ]
  )
  

• Initiation 2 : Get.put() 사용

  @override
  Widget build(BuildContext context) {
      final controller = Get.put(ReactiveStateController());
        
      ...
            
  }
  

  Column(
      children [
          GetBuilder<ReactiveStateController>(
              // init: SimpleStateController(), init 안써도 됨
              builder: (c) {
                  return Text('count' : '${c.count.value}');
              }
              Obx(() {
               	return Text('count' : '${controller.count2.value}');   
              }) // Obx(Observable)는 빌더 필요 없는 방식   
          )
          ElevatedButton(
              onPressed: () {
                  controller.count1++; // controller라는 지정한 이름으로 사용 
              }
              child: Text('Count Up!'),
          )
            
          ...
            
      ]
  )
  

3. 반응형 상태관리의 추가 기능

• 반응형 getter

  import 'package:get/get.dart';
    
  class ReactiveStateController extends GetxController {
    RxInt count1 = 0.obs; 
    var count2 = 0.obs;
        
    get sum => count1.value + count2.value; 
      // 둘 중의 하나 이상이 변경 될 때 자동으로 최신화 시켜주는 getter
      
  }
  

  Column(
      children [
          GetBuilder<ReactiveStateController>(
              builder: (c) {
                  return Text('count1' : '${c.count2.value}');
              },
              Obx(() {
               	return Text('count2' : '${controller.count2.value}');   
              }), // Obx(Observable)는 빌더 필요 없는 방식   
              Obx(() {
               	return Text('SUM' : '${controller.sum}'); 
                  // sum은 count1과 count2를 전부 듣고 있다
                  // 하지만 변경이 될 때만 듣는 방식이다
                    
              })
          )
          ElevatedButton(
              onPressed: () {
                  controller.count1++; // controller라는 지정한 이름으로 사용 
              }
              child: Text('Count Up!'),
          )
            
          ...
            
      ]
  )
  

그 외의 기능으로는 다음 기능들이 있다

• 반응형 Class
• 반응형 List
• onInit()에 추가되는 Worker들
  • Ever : 매번 변경 될 때 실행
  • Once : 처음 변경 되었을 때만 실행
  • Interval : 계속 변경이 있는 동안 특정 지정 시간 인터벌이 지나면 실행
  • Debounce : 인터벌이 끝나고 나서 특정 지정 시간 이후에 한번만 실행

4. 단순형 상태관리 vs 반응형 상태관리

큰 차이가 없다면 단순상태관리가 메모리도 적게 쓰고 효율적이다. 하지만 worker를 사용해야 하는 경우에는 반응형 상태관리를 써야 한다.

출처

• https://www.youtube.com/watch?v=CoFLunStYdU