Getx에는 GetBuilder 와 Reactive State Manager가 존재한다.
이에 대해서 알아보자..
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 할 수 있음
출처 및 참고 : 유튜브 코딩셰프
'Flutter' 카테고리의 다른 글
| [Flutter/플러터] getx를 사용하여 like 버튼(하트 버튼) 만들기 (0) | 2022.09.23 |
|---|---|
| [Flutter/플러터] Dart 반복문 쓰지 않고 리스트 합, 최댓값, 최솟값 구하기 - fold (1) | 2022.09.23 |
| [Flutter/플러터] 키보드 overflowed 문제 해결하기(키보드 열림 무시) (0) | 2022.09.21 |
| [Flutter/플러터] Dart에서의 변수 할당(final, const, static) (1) | 2022.09.21 |
| [Flutter/플러터] 뒤로가기 버튼 두 번 클릭 후 앱 종료하기 (1) | 2022.08.02 |
