[flutter] 상태 관리 - GetX

Shin·2022년 11월 16일
0

flutter

목록 보기
4/6

GetX

Bloc, Provider와 같이 GetX 또한 플러터를 위한 상태 관리 패키지이다
GetX는 고성능 상태 관리, 지능형 종속정 주입, 라우트 관리를 가능하게 해준다
GetX는 모든 상황에 생산성, 성능, 조직화라는 3가지 기본 원칙을 가지고 있다

예제

dependencies:
	get:
import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(GetMaterialApp(home: Home()));

GetX를 사용하기 위해선 패키지를 설치 후, 기존에 사용하던 MaterialApp를 GetMaterialApp로 변경해준다

GetMatirialApp은 MaterialApp의 자식일 뿐이다
또한 라우트를 생성하고 추가하며, 번역을 추가하고, 라우트 탐색에 필요한 모든 것을 추가한다

만약 상태 관리 또는 종속성 관리에만 Get을 사용하는 경우 GetMatirialApp를 사용할 필요가 없다

import 'package:get/get.dart';

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
}

상태 관리를 위한 컨트롤러 생성 시, GetxController을 상속받는다
변수에 .obs() 를 이용해 observable로 만들 수 있다

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

  
  Widget build(BuildContext context) {
    final Controller c = Get.put(Controller());

    return Scaffold(
      appBar: AppBar(
        title: Text('FirstPage'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text('${c.count}')),
            ElevatedButton(
              onPressed: () {
                c.increment();
              },
              child: Text('+'),
            ),
            ElevatedButton(
              onPressed: () {
                Get.to(SecondPage());
              },
              child: Text('Go to SecondPage'),
            ),
          ],
        ),
      ),
    );
  }
}

Get.put()을 사용해서 클래스를 인스턴스화하여 모든 하위 위젯에서 사용 가능하다
그러면 count가 변경 될 때마다 Obx(()=>)를 사용하여 Text()에 업데이트 한다
또한 Get.to를 통해 context없이 간단하게 페이지 이동이 가능하다

class SecondPage extends StatelessWidget {
  final Controller c = Get.find();

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('${c.count}'),
      ),
    );
  }
}

다른 페이지에서 사용되는 컨트롤러를 Get.find()로 찾아서 redirect 할 수 있다
그러면 컨트롤러 c의 count 변수 또한 사용 가능하다


GetX의 세가지 주요점

1. 상태 관리

Get은 두가지 상태 관리자가 있는데, 단순 상태관리자(GetBuilder)와 반응형 상태관리자(GetX/Obx)가 있다

반응형 상태 관리자

반응형 프로그래밍은 복잡하다고 알려져있지만, GetX는 이를 매우 단순하게 변경할 수 있다

var name = 'Shin';
Obx(() => Text('${controller.name}'));

앞 예제처럼 변수에 .obs를 추가하여 observable로 만든 후, UI에 Obx(() =>)를 사용하여 업데이트 해주면 된다

2. 라우트 관리

GetX는 라우트/스낵바/다이얼로그/bottomsheets을 context 없이 사용할 때 매우 효과적이다

GetMaterialApp(
	home: MyHome(),
)

우선 기존 MaterialApp을 GetMaterialApp로 변경해준다

Get.to(SecondScreen());

Get.toNamed('/details');

새로운 화면으로 이동 시 Get.to를 이용하거나, 명칭으로 이동할 때 Get.toNamed를 사용한다

Get.back();

스낵바, 다이얼로그, bottomsheets 등을 닫게 한다

Get.off(secondScreen());

Get.offAll(SecondScreen());

이전 화면으로 돌아갈 필요가 없는 경우(스플래시, 로그인 화면 등)에는 off를 사용한다
이전 화면을 모두 닫는 경우(투표, 쇼핑카트, 테스트 등)에는 offAll을 사용한다

GetX의 라우트 관리는 context를 사용할 필요가 없다는 점에서 큰 장점이다
이를 통해 걱정없이 컨트롤러 클래스 내에서 이런 모든 메소드를 실행할 수 있다

3. 종속성 관리

GetX는 Provide context, inheritedWidget 없이 1줄의 코드로 종속성 관리가 가능하다

Controller controller = Get.put(Controller());

controller.fetchApi();

Get 인스턴스에서 인스턴스화하면 앱에서 해당 클래스(controller)를 사용할 수 있다

Controller controller = Get.find();

Text('${controller.textFromApi}')

다른 페이지에서 controller에 있는 데이터가 필요할 때, Get.find를 이용하여 controller을 쉽게 찾을 수 있다


이밖에도 GetX는 번역, 테마 변경, GetConnect, 미들웨어 등 수많은 기능이 있다
이러한 기능들을 적절히 활용하면 훨씬 간단하게 어플 기능들을 구동시킬 수 있다는 점에서 GetX는 매우 굉장한 패키지임을 보여준다


출처 : https://github.com/jonataslaw/getx/blob/master/README.ko-kr.md#Get%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

0개의 댓글