[Flutter/플러터] 플러터 상태관리 - Getx(GetBuilder, Reactive State Manager)(1)

 

Getx에는 GetBuilder 와 Reactive State Manager가 존재한다.

이에 대해서 알아보자..

 

https://pub.dev/packages/get

 

 

 

1. Simple State Manager with GetBuilder

  ▶  state가 변할 때 마다, 변한 state를 화면에 다시 그려줌

 

 

       사용 예시)

Controller controller = Get.put(Controller()));
                ...
  
GetBuilder<Controller>(
	builder : (_) => Text('${controller.x}')

 

 

 

get을 통해 _x 값을 가져오며, increment를 통해 증가된 값을 확인하기 위래

변수 값이 바뀌었다고 알려주는 update 매서드를 호출해야 한다. 

class Controller extends GetxController{
    int _x = 0;
    int get x => _x;
    
    void increment(){
    	_x++;
        update();
      }  
 }

 

 

init을 통해 직접 controller 인스턴스를 생성할 수도 있다.

 

이때, 만들었던 인스턴스는 삭제하고 아래와 같이 find를 불러온 다음 Controller 타입을 지정해 주고 

x 값을 호출해 주면 된다. 

//Controller controller = Get.put(Controller()));
                ...
  
GetBuilder<Controller>(
	builder : (_) => Text('${Get.find<Controller>().x}')
    
                ...
          ), 
          
    ElevatedButton(
    	onPressed: (){
        	Get.find<Controller>().increment();

 

 

 

장점 : 메모리를 아낄 수 있다.

단점 : 데이터를 업데이트 하기 위해서는 항상 update 매서드를 불러와 수동으로 작업을 해 주어야 함

 

 

---

 

2. Reactive State Manager

  ▶  state를 바로바로 반영해주는 매니저 역할

 

 

Reactive  =  바로바로 반영하는 

reactive state manager는 state를 바로바로 반영해주는 매니저 역할을 한다.

async 비동기 방식이며,  state가 지속적으로 변하는 경우에 사용하기 적합하다.

 

 

장점 : 1) 자동으로 UI를 업데이트 해줌 

           2) getbuilder 보다는 무거우나 부담될 정도는 아님 

 

 

 

 

▶ Rx란?

     ReactiveX 의 줄임말로 어떤 데이터의 흐름을 관찰하는 데 포커스를 둠

    data stream = Observable  ↔ Observer

 

다른 작업을 하다가 observer가 데이터 발생을 감지할 때만 반응하면 됨

 

 

 

---

 

 

 

reactive state manager는 MVC 패턴으로 주로 생성한다. 

 

 

 

 MVC 패턴이란? 

 

     M = Model  데이터를 관리하는 역할, 데이터를 정의하고 수정하거나 삭제하는 데이터 가공 역할도 함

     V = View 사용자에게 보여지는 UI를 관리해 주는 역할

     C = Controller 각각 독립적으로 일하는 모델과 뷰를 중간에서 연결해주는 역할

 

 

      흐름으로 이해하기

 

 

      1) 모델이 가진 데이터를 뷰를 통해 전달하며 화면에 출력한다. 

      2) 뷰에서 사용자 이벤트인 버튼 클릭이 발생했을 때 컨트롤러에서 모델의 데이터를 변경하여

           UI를 업데이트 시켜준다. 

 

 

 

 

 

 

아래 예시 코드를 보자

 

model.dart

class Person{
    int age;
    String name;
    
    Person({this.age = 0, this.name = ''});    
}

 

 

controller.dart

class Controller extends GetxController{
    //1. observable 만들기 
    final person = Person().obs;
    
    void updateInfo(){
    	person.update((val) {
        	val?.age++;
            val?.name = 'Observable';
        });
     }   
 }

이때, obs는 Rx 인스턴스를 리턴하며, observable 이다.

 

updateInfo에서의 update 매서드는 위의 getbuilder에서의 update 매서드와는 다르다.

person.update((val) { }); 는 state의 현재 값을 가져오게 한다.  

(getbuilder의 update 매서드는 말 그대로 값을 update 시키는 역할을 한다..)

 

 

 

view.dart

class View extends StatelessWidget{
	...
    //1. 컨트롤러 인스턴스 생성 후 dependency injection 해주기
    final Controller controller = Get.put(Controller());
    
	...
    
	return Scaffold(
		body : Center(
        	//2. listener인 observer 생성하기 
    		child : Getx<Controller>(builder: (_) => Text(
              'Name : ${controller.person().name} ' )),
         ),
         ...
         //3. 수행할 controller 작업 불러오기 
         floatingActionButton: FloatingActionButton(
         	onPressed : (){
            	controller.updateInfo();
                }
           ),
           ...
    );          
}

 

이번에는 obx를 통해 값을 업데이트 시켜보자.

 

class View extends StatelessWidget{
	...
	return Scaffold(
		body : Center(
    		child : Obx((_) => Text(
              'Name : ${controller.person().name} ' )),
         ),
         ... 
}

 

 

 

정리

 

 

obx :

• observable(obs)의 변화를 listen 함
• Controller 인스턴스가 미리 다른 곳에 initialize 되어 있어야 함 

 

Getx : 

•  Observable(obs)의 변화를 listen 함
• 자체적으로 Controller 인스턴스를 initialize 할 수도 있음
• obx보다 다양한 기능을 내장하고 있어서 좀 무거울 수 있음

 

Getbuilder : 

• Observable(obs)의 변화를 listen 하지 않음
• 수동으로 UI를 리빌드 해야함, 반드시 update 매서드 호출 필요
• 자체적으로 Controller 인스턴스를 initialize 할 수 있음 

 

 

 

출처 및 참고 : 유튜브 코딩셰프