[Flutter] GetX

GetX 특징

GetX는 매우 가볍고 강력한 솔루션이며, 고성능 상태 관리, 지능형 종속성 주입, 라우트 관리 기능을 제공한다.

GetX는 다음과 같은 3가지의 기본 원칙을 가지고 있다.

• 성능
  • 성능과 리소스 소비의 최소화에 집중한다.
  • Streams, ChangeNotifier를 사용하지 않는다.
• 생산성
  • 쉽고 간결한 구문을 사용한다.
  • 사용하지 않는 리소스는 메모리에서 자동으로 제거해준다. 따라서 개발자가 메모리에서 컨트롤러를 제거하는 것을 신경쓰지 않아도 된다.
• 조직화
  • 화면, 프레젠테이션 로직, 비즈니스 로직, 종속성 주입, 네비게이션을 완전히 분리할 수 있다.

 

라우트(Route) 관리

라우트간 이동 또는 다이얼로그 띄울 때 context가 필요하다. GetX사용하면 context 없이 라우트 관리 가능.

 

상태(State) 관리

simple 방식

첫번째 방식은 비교적 간단한 방식이다. reactive 방식보다 메모리를 적게 사용한다는 장점이 있다.

// GetxController를 상속(extends)하는 controller 클래스를 만드세요
class Controller extends GetxController {
  int counter = 0;
  void increment() {
    counter++;
    update(); // increment()가 호출되었을 때, counter 변수가 변경되어 UI에 반영되어야 한다는 것을 update()로 알려주세요
  }
}
// 당신의 Stateless/Stateful 클래스에서, increment()가 호출되었을 때 GetBuilder를 이용해 Text를 업데이트 하세요
GetBuilder<Controller>(
  init: Controller(), // 맨 처음만! 초기화(init)해주세요
  builder: (_) => Text(
    '${_.counter}',
  ),
)

// controller는 처음만 초기화하면 됩니다. 같은 controller로 GetBuilder를 또 사용하려는 경우에는 init을 하지 마세요.
// 중복으로 'init'이 있는 위젯이 배치되자마자, controller는 자동적으로 메모리에서 제거될 것입니다.
// 걱정하실 필요 없이, Get은 자동적으로 controller를 찾아서 해줄겁니다. 그냥 2번 init하지 않는 것만 하시면 됩니다.

 

GetBuilder 에 아이디를 부여하여 같은 변수 라도 아이디 있는 값을 업데이트 할 수 있다. update(['id']);

reactive 방식

extends GetxController, update(); 안해줘도 된다. RxInt count = 0.obs 만 해주면 됨.

(단, worker 쓰려면 extends GetxController 필요 하다.)

Obx. 사용가능 count.value 해서 접근 가능하다. (단 리스트는 .value 안해줘도 된다.)

count(5) ⇒ count = 5; 랑 같다.

simple 방식에서는 value가 바뀌지 않아도 무조건 다시 그리는데 reactive 방식은 value가 바뀌지 않으면 다시 그리지 않는다.

 

Binding

바인딩은 페이지 이동할때 컨트롤러를 주입해 주는 것이다.

 

- Get.put(); : 페이지 이동 하자 마자 컨트롤러 생성되고 페이지에서 나오면 컨트롤러 삭제 및 메모리해제 한다.

 

- Get.lazyPut(); : 페이지 이동 하자 마자 컨트롤러 생성이 아니고 컨트롤러 사용할때 컨트롤러 생성. 페이지 나오면 컨트롤러 삭제 및 메모리 해제 동일 하다.

 

- Get.putAsync(); : Get.put();과 큰차이 없지만 비동기 처리 해야될 때 컨트롤러가 바로 생성되는 게 아니라 앞선처리 후에 컨트롤러 생성 된다. - 인스턴스 생성 후 api 통신해도 되서 굳이 잘 안쓴다고 한다.

 

- Get.create(); : 이것도 거의 안쓴다고 한다. Get.put(); 에서는 한번 컨트롤러 생성되고 다시 선언 해줘도 또 생성 안되는데 이것은 계속 컨트롤러가 생성된다. (hashcode 찍어보면 인스턴스화 된 고유키를 알 수 있다.)

바인딩 해주는 이유는 페이지에서 Get.put();을 안해줘도 되서 코드 분리가 가능하다. 바인딩 페이지에서 사용하는 컨트롤러 모두 넣어줄 수 있다.

 

페이지에서는 Get.put(); 안해줘도 바인딩 해줬기 때문에 동일하게 사용이 가능하다.

 

GetxController는 싱글톤 방식이기 때문에 하나만 존재한다. 따라서 static으로 선언 해서

 

static CountControllerWithGetX get to ⇒ Get.find();

 

넣어주면 page에서 CountControllerWithGetX.to.increase(); 이런식으로 사용이 가능하다.

 

또한 page에서 extends GetView<CountControllerWithGetX> 해주면 controller.increase(); 로 바로 접근 가능하다. - reactive 방식을 쓰면 Obx 에서 controller로 바로 접근 가능 하다.

 

simple 방식을 쓰면 GetBuilder 방식이라 위와 같은 방식은 필요 없다.

 

컨트롤러를 계속 유지해야 될 때는 Get.put(GetXControllerTest(), permanent: true);

 

다시 페이지 간경우에도 이전값이 그대로 유지되는것을 확인 할 수 있다.

 

GetxService 써주면 동일하게 사용 가능하고 extends GetxService 로 사용한다.

 

초기화 해주고 싶으면 Get.reset(); 해주면 된다. (단, 모든 GetxController초기화 되서 모두 초기화 필요할 때만 사용해야된다.)

 

getx/README.ko-kr.md at master · jonataslaw/getx

[ flutter ]상태관리의 끝판왕? GetX를 정리해 보았다.

[ Flutter / 플러터 ] GetX란? 간단하게 훑어보자 #1