플러터의 GetX ?

플러터의 다음 포스팅으로 자주 쓰는 위젯을 적으려고 했는데

사실 워낙 많은 위젯이 있고 모든걸 다 적는건 시간도 시간이고

그때그때 찾는게 더 효율적일거 같다는 생각이 들어서

많은 사람들이 잘쓰고 있고 유명한 오픈소스 위젯? 들에 대해서 적어보려고 한다.

이번 포스팅은 GetX다.

---

1. GetX란 뭘까?

전 포스팅에서 말했던 state (상태) 라는 개념을 관리하기 위해 많이쓰이고 있다.

다시 정리하면 Flutter를 위한 state 관리 라이브러리다.

플러터에서는 GetX ,BLOC, Provider 등을 상태관리로 많이 쓰고 있는데 그 중에서 GetX가 상대적으로

사용하기 편하고 또 강력해서 많이들 사용한다.

 

2. GetX는 상태관리말고도 이것저것 해준다.

• 라우팅 (화면 전환 애니메이션도 제공)
• 의존성 주입

3. GetX는 왜 좋을까?

• 성능 : Getx 는 Streams 이나 ChangeNotifier 를 사용하지 않는다. 리소스 사용을 최소화 하려고 한다.
• 생산성 : 컨트롤러에서 메모리를 굳이 제거하지 않아도 된다. 사용하지 않게되면 자동으로 제거된다.
• 조직화 : 라우팅 기능을 사용할때 context를 사용하지 않아도 된다. 자체 의존성 주입기능으로 프로젝트를 작성할때 편리하게 도와준다.

4. GetX import

 

pubspec.yaml 파일에 dependency 추가:

dependencies:
  get:

5. GetX 시작하기

기존에 프로젝트를 시작하면 

void main() {
  runApp(MyApp());
}

이렇게 작성되어있는데 GetX 를 사용하기 위해서는 

// GetX 사용
void main() {
  runApp(GetMaterialApp(home: Home());
}

GetMaterialApp 로 바꿔서 사용해주자. 그래야 GetX가 해당 위젯의 자식들에 위치한 GetX 를 알아볼 수 있게 된다.

 

6. GetX 사용 예시

상태관리 라이브러리를 쓰지 않는 경우에는 setState 를 사용해서 상태를 변경 할 수 있는데 이 방법도 나쁘지 않지만 관리해야하는 상태가 많다면 관리에 어려움이 생긴다.

 

GetX 를 사용하면 아래와 같이 상태를 관리 할 수 있다.

 

먼저 GetXController 를 만들어보자.

extends 로 GetxController 를 만들어주자.

class TabPageController extends GetxController {

  static TabPageController get to => Get.find();
  RxInt _curPage = 0.obs; //현재 페이지를 int 로 표현
  //Rx는 GetX 로 사용될 반응형 변수를 명시하는것이다. 값쪽에는 .obs를 적어줘야 작동한다.

  @override
  void onInit() {
    super.onInit();
  }

  RxInt get curPage => _curPage;

  void changeCurPage(int index) {
    _curPage(index);
  }
}

앱에서 tab 의 index 를 관리하는 controller 를 만들어보았다.

 

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
  	//이렇게 put 으로 GetController 등록한다. 클래스에서 처음 controller를 사용할때는
    //put을 사용해서 가져와야한다. put 으로 생성할때 컨트롤러가 생성되고 페이지에서 나오면 컨트롤러 삭제가 된다.
    //그 뒤로는 Get.find<TabPageController>(); 이런식으로 가져올 수도 있다. find는 위와 같은 상황을 반복하지 않고
    //이 페이지에서 만들어진 Controller 를 그냥 가져오는 동작이다.
    final TabPageController _tabPageCtrl = Get.put(TabPageController());
    
      return Obx(() => Scaffold(
          backgroundColor: XEColors.backBlack,
          body: SafeArea(
              child: Center(child: _pages![_tabPageCtrl.curPage.value.toInt()])), //참조할 변수를 호출할땐 .value 를 붙여주자
          bottomNavigationBar: ... 이하생략
      }
      
  }

+ 저 시점에 Controller 를 메모리에 올리지 않고 미리 올려두고 싶다면 GetX binding 이라는 개념에 대해 알아보면 된다.

 

그리고 Obx 라는 개념이 나오는데 이렇게 Controller 에서 사용되고 있는 변수의 값이 변할때마다 반응형으로 위젯을 새로 그려주고 싶을때 Obx로 해당 위젯을 감싼다.

쉽게 설명하자면 'Controller 에 있는 값이 변할때마다 자동으로 이 위젯에 반영해줘' 라는 뜻이된다.

 

관련해서 공부하다보면 update 를 적어줘서 값의 변화를 명시적으로 알려주기도 하고 그냥 위처럼 Rx obs를 사용해서 

작성하기도 하는데 이런 방식은 

 

1. update 를 통한 상태관리 -> Reactive 방식에 비해 메모리를 적게 사용한다.

2. Reactive한 상태관리 -> 편하다. 귀찮지 않다.

 

로 나눠볼 수 있겠다.

 

1번의 방식으로 개발할때는 GetBuilder 를 사용한다. 

Obx 대신

GetBuilder<Controller>(
	init: Controller(), // GetBuilder안 init
	builder: (_) {
    	return Text('count : ${_.count}');
    },
),

이런 느낌으로 사용된다. 여기서는 .value를 적어주지 않는걸 볼 수 있다. Controller 에서도 Rx나 obs 를 사용하지 않고

class Controller extends GetxController{
  int count = 0
  increment(){
  	count++;
    update();
  }
}

이렇게 적을 수 있다.

 

2번의 방식은 처음에 설명한 방식처럼 사용하면 된다!

 

이번 포스팅에서는 간단하게 GetX의 기본적인 부분을 알아봤다.

다음에는 GetX 의 라우팅에 대해서 알아보자