[Flutter] GetX에 대해 조금만 알아보자

안녕하세요!

오늘은 Flutter 하면 가장 먼저 떠오를 라이브러리인 GetX에 대해 조금만 알아보겠습니다.

---

 

https://pub.dev/packages/get

get | Flutter Package

pub.dev에서 like가 3000 정도 넘으면, Flutter에서 자주 사용되는 라이브러리구나! 정도라 생각하는데, GetX는 13000이 넘습니다..!!

그래서 그런지 몰라도, 공식 문서가 꽤 세세하게 잘 적혀있습니다! 전 공식 문서에서 간단하게 정리만 해서 요약해보려고 합니다.

[참고자료 : GetX Github 공식 한국 문서]

주요점

상태관리 (State)

참고 자료

다른 상태관리 라이브러리와 차이점은 Streams나 ChangeNotifier를 사용하지 않는다고 합니다. 반응 시간을 줄이고 RAM을 효율적으로 사용하기 위해, GetValue와 GetStream을 만들어 사용합니다. 이는 적은 연산 자원으로 낮은 레이턴시와 높은 퍼포먼스를 보여준다고 합니다. 또한, GetX에서는 단순 상태관리자와 반응형 상태관리자, 두 가지 형태로 나뉩니다.

 

반응형 상태관리자

var name = 'hello worlds'.obs; // .obs 추가만으로 Observable로 변경
Obx(() => Text('${controller.name}')); // 값이 변경될 때마다 업데이트

Obx를 사용하면, Obx가 관찰 중인 인자의 변경이 이루어졌을 때 업데이트하게 됩니다. 최적의 알고리즘으로 최대의 성능을 뽑아낼 수 있다고 합니다.

 

단순 상태관리자

// 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하지 않는 것만 하시면 됩니다.

ChangeNotifier를 사용해 보신 분이라면, 단번에 이해하실 수 있으실 겁니다. 특정 동작이 진행되거나 트리거가 필요한 시점에 GetXController를 상속받는 Controller를 사용하고 update()를 통해 UI를 리프레시할 수 있습니다.

종속성 주입 (아래에 서술하겠습니다.) 과 사용하면 매우 효과적이라고 설명합니다.

라우트 관리 (Route)

참고자료

라우트 관리 또한 GetX에서 매우 쉽게 지원한다고 합니다.

MaterialApp 대신 GetMaterialApp을 통해 고급 GetX API를 사용할 수 있다 합니다.

GetMaterialApp( // 이전: MaterialApp(
  home: MyHome(),
)

이렇게 되면 Get을 통해 여러 route 함수를 사용할 수 있습니다.

Get.to(NextScreen()); // 다음 화면으로 이동
Get.toNamed('/details'); // 명칭으로 이동
Get.back(); // 화면 pop
Get.off(NextScreen()); // 화면 대체
Get.offAll(NextScreen()); // 이전 화면 stack 전부 제거 후 이동

화면 이동뿐만 아니라, SnackBars, Dialog, BottomSheet에 관해서 지원해 줍니다.

Get.snackbar('Hi', 'i am a modern snackbar');
Get.dialog(YourDialogWidget());
Get.bottomSheet(YourBottomSheet());

종속성 관리 (Dependency)

참고자료

대부분의 플랫폼에서 종속성 주입을 통해 Model을 관리하고, 더욱 효율적인 코드에 대해서 고민 중입니다. GetX에서는 이를 위해 지원해 주는 간단하고 강력한 종속성 관리자가 있다고 합니다.

Controller controller = Get.put(Controller()); // Controller controller = Controller(); 대체

 

위의 코드에 적혀있는 Get.put() 함수는 종속성 인스턴스화의 가장 흔한 방법이라고 합니다. Controller를 예시로 든 만큼, Controller와 함께 사용할 때, 좋다고 합니다. 아래는 다른 종속성 주입 방법들입니다.

// ApiMock을 lazyLoad. Get.find<ApiMock>을 사용하는 경우에 호출.
Get.lazyPut<ApiMock>(() => ApiMock());

// 비동기 인스턴스 등록
Get.putAsync<YourAsyncClass>( () async => await YourAsyncClass() )

이렇게 인스턴스화된 함수 / 클래스들은 다른 Class나 File에서 사용하려면, Get.find() 함수를 사용하면 됩니다.

final controller = Get.find<Controller>();
// OR
Controller controller = Get.find();

// 그렇습니다. 마법 같아요. Get은 controller를 찾아 가져다 줍니다.
// Get은 백만개의 contrller를 인스턴스화해서 가질수 있고 항상 올바르게 전달해 줍니다.
// 위의 주석들은 문서에 적혀있는 것... 자신감이 어마무시하다.

더 나아가 바인딩까지 이을 수 있습니다.

class HomeBinding implements Bindings {
  @override
  void dependencies() {
    Get.lazyPut<HomeController>(() => HomeController());
    Get.put<Service>(()=> Api());
  }
}

class DetailsBinding implements Bindings {
  @override
  void dependencies() {
    Get.lazyPut<DetailsController>(() => DetailsController());
  }
}

Bindings를 implements 한 후, dependencies() 함수를 override 하여, 필요한 종속성들을 인스턴스화해줍니다. 그리고 이러한 바인딩을 라우트에 연결해주기만 하면 됩니다.

Get.to(Home(), binding: HomeBinding());
Get.to(DetailsView(), binding: DetailsBinding())

 

위의 정리한 내용들이 GetX의 전반을 이루고, 개발자들에게 많은 사랑을 받을 수 있었던 내용들이었습니다. 여기에 더 나아가 GetX는 Localizing, 테마, 위젯, 통신 등 앱을 개발할 때, 필요하다 싶은 부분에 관해서 모조리 지원해 주겠다는 느낌으로 기능이 많습니다. 라이브러리가 비대해 무겁진 않을까? 생각이 들지만 이 또한 GetX에서는 인지하고 있었습니다. 와우..

GetX는 비대하지 않습니다. 아무 걱정 없이 프로그래밍을 시작할 수 있는 다양한 기능이 있지만 각 기능은 별도의 컨테이너에 있으며 사용한 후에만 시작됩니다. 만약 상태 관리만 사용하면 오직 상태 관리만 컴파일됩니다. 라우트만 사용하는 경우 상태 관리는 컴파일되지 않습니다.

---

GetX의 주요점들에 대해 알아보았습니다. 물론, 내용의 일부만 각색하여 정리해 두었고, 설명하지 못한 기능들도 많은 라이브러리입니다. GetX에 대한 제 개인적인 생각을 적어보려고 합니다.

장점

• 코드의 단순화 및 정리가 깔끔함.
• GetX만으로 많은 것을 처리할 수 있음.
• 뷰와 로직의 분리를 지향하는 만큼, 이에 대한 준비가 되어있음.

단점

• 하나의 라이브러리에 너무 많은 것이 있음.
• Flutter 공식 지원이 아님. 다른 라이브러리들도 해당되는 말이지만, GetX는 너무 많은 것이 있어 더욱 큰 문제점이라고 생각함.
• 기존 Flutter와는 너무 다른 코드를 짜야함. GetX는 Flutter가 아니다는 말이 있을 정도로, 라이브러리가 하나의 프레임워크 정도로 큼.

이렇게 장점과 단점을 정리해 보았습니다.  GetX의 너무 큰 지원이 장점과 단점에 대한 초점이라 할 수 있겠습니다. 이에 대해서 본인 상황에서 GetX를 도입하였을 때, 낼 수 있는 퍼포먼스와 손실을 계산하여 더욱 좋은 선택을 하실 수 있으면 좋겠습니다.