Flutter GetX의 Obx() 사용 시 유의할 점 하나
📄

Flutter GetX의 Obx() 사용 시 유의할 점 하나

Created
Jan 23, 2021 04:30 PM
Tags
dart
flutter
getx
 
다트에는 리액티브한 구현을 도와주는 RxDart 패키지가 있다.
무슨 말이냐 하면...
 
final str = ''.obs; // RxString type

Text(str); // render
 
이렇게 str 변수를 정의하면 str 값이 바뀔 때
이를 렌더링하는 Text Element가 자동으로 업데이트 되도록 구현이 된다는 말.
 
원래는 State 클래스를 extends 하는 방식으로 구현하거나
Provider 또는 Stream 을 사용해 구현해야만 했었다.
 
아무튼 이러한 상태(States)를 관리해주는 패키지가 하나 더 있는데, 얘는 GetX 라고 불린다.
 
class MyController extends GetxController {
	final _str = ''.obs; // RxString type

	String get str => _str;
	set str(String str) => _str.value = str;
}
 
이렇게 MyController 를 선언했다면, 다음과 같이 전역적으로(또는 지역적으로) 등록이 가능하다.
 
Get.put(MyController());
 
등록 후에는 코드 내 어디서든지 바로 위에서 생성한 MyController 인스턴스의 사용이 가능하다.
 
MyController ctrl = Get.put();
 
근데 보면 MyController 클래스 내 _str 이라는 이름으로 RxString 타입.
즉, RactiveX-String 타입의 변수를 선언했으니, 다음과 같이 사용이 가능할 것이라 생각할 수 있다.
 
Text(ctrl.str); // non-reactive

ctrl.str = 'new text'; // update?
 
물론 new text 라는 값으로 다시 렌더링되지는 않는다.
Obx 라는 클래스를 이용해야 하기 때문.
 
얘는 그냥 리액티브한 Element임을 명시한다고 생각하면 되겠다.
 
Obx(() => Text(ctrl.str)); // reactive
 
다만 이 Obx 를 사용함에 있어 한 가지 유의해야 할 것이 있다.
반드시 리액티브, 그러니까 다시 렌더링되어야 할 Element를 포함하고 있어야 한다는 것.
 
언뜻 보면 당연한 말이기도 하나, 이로 인해 의도치 않은 에러를 마주할 수 있다. 실제로도 그랬고.
그러니까 다음과 같이 사용하지 말자.
 
class MyController extends GetxController {
	final _str = ''.obs; // RxString type

	String get str => _str;
	set str(String str) => _str.value = str;
}
Get.put(MyController());
MyController ctrl = Get.find();

Obx(() => Text(ctrl.str)); // OK
Obx(() => Text('non-reactive')); // ERROR
 
아무튼 뭐... 혹시나 해서...
 

Loading Comments...