GetX 어디까지 써봤나요?

베이비스푼을 개발하면서 상태관리 툴로 GetX를 사용했습니다.

오늘은 GetX를 사용하면서 자주 사용했던 용법들을 몇가지 정리해보려고 합니다.

(몇시간 정리했던 내용이 세션 만료로 인해 날아가는 불상사가 발생했네요 ㅠ,ㅠ)

 

1. Get.toNamed()

- Navigation.pushNamed() 동일

- GetPage()로 미리 등록해놓은 페이지의 name을 이용하여 Navigation Stack에 push 한다. 이후 Get.back()으로 이전 페이지로 돌아올 수 있다.

- arguments를 이용하여 필요한 정보를 전달하여 처리할 수 있다.

// toNamed 예제
Get.toNamed(Routes.SCREEN_HOME, arguments: {'isNewBaby': babyModel})

// arguments 예제
bool isNewBaby = Get.arguments['isNewBaby'] ?? false;

2. Get.offNamed()

- Navigation.pushReplacementNamed() 동일

- 현재 페이지를 pop 하고 등록되어 있는 page name을 호출하여 페이지 전환을 한다. Get.back()으로 이전 페이지로 돌아올 필요가 없는 경우 사용한다.

 

3. Get.back()

- Navigation.popUntil() 동일

- 현재 페이지, 팝업 다이얼로그, 스낵바, BottomSheet 등을 Navigation Stack에서 pop 한다.

 

4. Get.until()

- Navigation.popUntil() 동일

- Get.until() 함수에 정의된 조건이 만족될때까지 Navigation Stack의 페이지를 pop 한다.

- 아래와 같이 조건에 따라 라우팅할 수 있다.

if (Get.isRegistered<MainController>()) {
  Get.until((route) => Get.currentRoute == Routes.BABY_LIST);
} else {
  Get.offNamed(Routes.MAIN);
}

 

5. Get.put() / Get.lazyPut(), Get.find()

- GetX에서 지원하는 Dependency Injection 방법이다.

- 메모리에 클래스의 인스턴스를 주입합으로서 상태관리를 쉽게 사용할 수 있다.

- 메모리에 주입된 인스턴스 정보는 Get.find()를 통해 얻어올 수 있다.

// 인스턴스 저장
Get.put(babyModel);
Get.put(family, permanent: true);

// 인스턴스 조회 
BabyModel beforeBaby = Get.find<BabyModel>();
FamilyModel familyModel = Get.find();

 

6. GetBuilder()

- StatefulWidget을 대신해 사용할 수 있으며 원하는 시점에 view를 update할 수 있다. reactive하지 않다는 점을 인지하며 사용해야 한다.

- GetBuilder의 id 값을 설정 할 수 있다. update 함수에 id 정보를 array로 설정하여 선택적으로 update 할 수 있다.

// GetBuilder 예제
Widget renderGetBuilderTest() {
  return GetBuilder<HomeController>(
    id: 'homeBody',
    builder: (_) {
      return Container(
        child: renderBody(),
      );
    },
  );
}

// update 예제
HomeController homeController = Get.find();
homeController.update(['homeBody']);

 

7. Obx 

- Rx를 이용한 reactive 방식의 상태관리

- 선언 방식은 value.obs, Rx<Type>(Value), RxType(Value) 등이 있으며 주로 Value.obs 방식을 사용

- Rx로 선언된 변수를 Obx를 이용하여 반응형 위젯으로 설정하면 Rx변수가 변경되는것을 Obx가 인지하여 rebuild를 하기 때문에 변경사항이 즉시 반영된다.

// name 변수를 rx로 선언
RxString name = ''.obs;

// name 값을 변경
name.value = '메타코드';

// name 변수를 Obx로 반응형 위젯으로 설정
 Obx(() => Text(
      '${controller.name}',
      style: const TextStyle(
        color: Color(0xFF007AFF),
        fontSize: 12,
      ),
    ),
  ),

 

베이비스푼에서의 상태관리는

위에서 정리한 6번 항목과 7번 항목과 같이 각 페이지의 특성에 맞게 Obx와 GetBuilder를 적절히 나눠서 사용하고 있습니다.

두가지 모두 사용해보니 무조건 어떤것을 사용한다기 보다는 페이지와 기능에 맞게 적절한곳에 알맞게 사용하는것이 필요한 것 같습니다.

 

이상으로 프로젝트에서 주로 사용하는 GetX 용법들 중 일부만 살펴보았습니다.

잘못되었거나 추가로 공유하면 좋겠는 내용들은 댓글로 남겨주세요 :)