[GetX] 상태 관리

개요

Flutter에서 상태를 관리하기 위해서는 StatefulWidget나 InheritedWidget을 사용할 수 있습니다. 하지만, 복잡한 상태 관리를 위해서는 Bloc 패턴이나 Provider와 같은 패키지를 사용하게 됩니다.

[Flutter] Provider

이번 블로그 포스트에서는 Flutter에서 상태 관리에 가장 많이 사용되는 패키지인 GetX에 대해서 소개합니다. 이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/getx/state_management

GetX

GetX는 상태 관리 패키지로 많이 알려져있지만, 사실 이보다는 더 많은 기능을 가지고 있습니다. Flutter에서 GetX를 사용하게 되면, 상태 관리뿐만 아니라, Route, 다국어 지원, 화면 크기 가져오기, API 호출 기능 등 다양한 기능을 제공하고 있습니다.

이번 블로그 포스트는 그 중에서 상태 관리에 관해 설명할 예정입니다.

GetX 설치

Flutter에서 GetX의 사용법을 확인하기 위해 다음 명령어를 사용하여 Flutter의 새로운 프로젝트를 생성합니다.

flutter create state_management

그런 다음 명령어를 실행하여 GetX 패키지를 설치합니다.

flutter pub add get

이번 블로그 포스트에서는 Flutter 명령어로 생성한 기본 프로젝트를 GetX를 사용하여 리팩토링함으로써 GetX를 이용한 상태 관리를 설명하겠습니다.

GetX 설정

Flutter에서 GetX를 사용하기 위해서는 MaterialApp 대신 GetMaterialApp을 사용할 필요가 있습니다. 이를 확인하기 위해 lib/main.dart 파일을 열고 다음과 같이 수정합니다.

import 'package:get/get.dart';
...
class MyApp extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      ...
    );
  }
}

상태 관리

GetX는 다음과 같이 두가지 상태 관리 방법을 제공합니다.

단순 상태 관리(Simple state management)
반응형 상태 관리(Responsive state management)

단순 상태 관리

GetX를 사용하여 단순 상태 관리를 위해, lib/controller/count_controller.dart 파일을 생성하고 다음과 같이 수정합니다.

import 'package:get/get.dart';

class CountController extends GetxController {
  int count = 0;

  void increment() {
    count++;
    update();
  }
}

GetX에서 상태 관리를 위한 클래스를 생성할 때에는 GetxController를 상속받게 됩니다.

class CountController extends GetxController {
  ...
}

그리고 관리할 상태 변수를 선언합니다.

class CountController extends GetxController {
  int count = 0;
  ...
}

마지막으로 해당 변수를 업데이트할 함수를 선언합니다.

class CountController extends GetxController {
  ...
  void increment() {
    count++;
    update();
  }
}

단순 상태 관리를 사용하는 경우 상태값을 변경한 후, update() 함수를 사용하여 상태가 변경되었음을 알려줄 필요가 있습니다. update()를 사용하지 않으면, 상태값은 변경이되지만, 화면 갱신이 일어나지 않아 해당 상태가 적용되지 않은 화면을 확인할 수 있습니다.

이제 이렇게 생성한 GetX 컨트롤러를 사용해 보도록 합시다. lib/main.dart 파일을 열고 다음과 같이 수정합니다.

import 'package:get/get.dart';

import 'controller/count_controller.dart';

...

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(CountController());

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            GetBuilder<CountController>(builder: (controller) {
              return Text(
                '${controller.count}',
                style: Theme.of(context).textTheme.headline4,
              );
            }),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

이제 우리는 GetX로 상태 관리를 할 예정이므로 더이상 StatefulWidget 위젯을 사용할 필요가 없습니다. 따라서 다음과 같이 MyHomePage 위젯을 StatelessWidget 위젯으로 수정하였습니다.

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);
  ...
}

GetX로 상태 관리를 하기 위해서는 GetX로 만든 컨트롤러를 다음과 같이 Get.put을 사용하여 등록(Register)할 필요가 있습니다. 이렇게 컨트롤러를 등록하였다면, 등록된 이후 코드에서 컨트롤러를 사용하여 상태를 관리할 수 있게 됩니다.

class MyHomePage extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
    final controller = Get.put(CountController());
    ...
  }
}

단순 상태 관리에서 상태의 변화를 감지하고 변경된 상태값을 적용하기 위해서는 다음과 같이 GetBuilder를 사용해야 합니다. GetBuilder를 사용하지 않으면, 상태가 변경된 것을 인지하지 못하고, 변경된 값을 화면에 반영할 수 없습니다.

GetBuilder<CountController>(builder: (controller) {
  return Text(
    '${controller.count}',
    style: Theme.of(context).textTheme.headline4,
  );
}),

GetX로 생성한 상태값을 변경하기 위해서는 우리가 만든 increment 함수를 호출할 필요가 있습니다. increment 함수를 호출하기 위해, 다음과 같이 FloatingActionButton의 onPressed 이벤트에 연결합니다.

floatingActionButton: FloatingActionButton(
  onPressed: controller.increment,
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

이제 프로젝트를 실행하고, 액션 버튼을 누르면, 화면에 값이 잘 변경되는 것을 확인할 수 있습니다. 이와 같이 GetX의 단순 상태 관리는 update() 함수를 사용하여, 상태를 화면에 반영할 타이밍을 결정할 수 있습니다.

반응형 상태 관리

반응형 상태 관리는 update 함수를 통해 상태를 직접 통보해야 하는 단순 상태 관리와는 달리 내부 로직으로 값의 상태 변화를 감지하고 화면에 변경된 값을 적용합니다.

이를 확인하기 위해 lib/controller/count_controller.dart 파일을 다음과 같이 수정합니다.

import 'package:get/get.dart';

class CountController extends GetxController {
  final count = 0.obs;

  void increment() {
    count.value++;
    // count(count.value + 1);
  }
}

단순 상태 관리와 다르게 상태 변수를 생성할 때 .obs를 사용하여 생성합니다. 이렇게 생성한 변수는 단순한 타입이 아닌 RxInt와 같이 반응형 상태 변수가 됩니다.

반응형 상태 변수는 다음과 같이 두가지 방법으로 값을 변경할 수 있습니다.

count.value++;
// or
count(count.value + 1);

이제 이렇게 생성한 반응형 상태 관리를 사용하기 위해, lib/main.dart 파일을 다음과 같이 수정합니다.

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(CountController());

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Obx(
              () => Text(
                "${controller.count.value}",
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

반응형 상태 관리에서는 GetBuilder 대신 Obx를 사용하여 상태의 변경 여부를 감지합니다.

Obx(
  () => Text(
    "${controller.count.value}",
    style: Theme.of(context).textTheme.headline4,
  ),
),

이제 프로그램을 실행하고 액션 버튼을 누르면, 이전과 동일하게 카운트가 잘 올라가는 것을 확인할 수 있습니다.

LifeCycle

StatefulWidget을 사용하면 위젯의 라이프사이클 함수를 사용할 수 있습니다. 이와 마찬가지로 GetxController를 사용하면 다음과 같은 라이프 사이클 함수를 사용할 수 있습니다.

class CountController extends GetxController {
  @override
  void onInit() {
    super.onInit();
  }
  @override
  void onClose() {
    super.onClose();
  }
}

onInit: 컨트롤러가 생성될 때, 호출됩니다.
onClose: 컨트롤러가 더이상 필요없어 메모리에서 제거될 때 호출됩니다.

Worker

Worker는 반응형 상태 값의 변화가 발생하였을 때, 이를 감지하고 특정 콜백 함수를 호출할 수 있도록 해줍니다.

ever(count, (_) => print("called every update"));
once(count, (_) => print("called once"));
debounce(count, (_) => print("called after 1 second after last change"), time: Duration(seconds: 1));
interval(count, (_) => print("called every second during the value is changed."), time: Duration(seconds: 1));

ever: 반응형 상태값이 변경될 때마다 호출됩니다.
once 반응형 상태값이 최초로 변경될 때 한 번만 호출됩니다.
debounce: debounce와 같이 동작합니다. 마지막 변경 이후 특정 시간동안 변경이 없으면 호출됩니다.
interval: interval과 같이 동작합니다. 반응형 상태값이 변경되는 동안, 일정 간격으로 호출됩니다.

Worker는 컨트롤러 혹은 클래스가 생성될 때만 사용할 수 있습니다. 즉, 컨트롤러의 onInit, 클래스 생성자, StatefulWidget의 initState 안에서 정의해야 합니다.

Get.find

지금까지 예제를 보면 GetX의 상태 값을 사용하기 위해서는 Get.put을 이용하여 컨트롤러를 생성하여 사용했습니다.

final controller = Get.put(CountController());

만약, 자식 위젯에서 해당 컨트롤러를 사용하여 상태 값을 변경하거나, 상태 값을 사용해야 하는 경우는 어떻게 해야할까요? 물론 다음과 같이 생성한 컨트롤러를 파라메터로 전달할 수 있습니다.

CustomWidget(controller: controller)

하지만 GetX에서는 Get.find를 제공하여 다음과 같이 좀 더 쉽게 생성된 컨트롤러에 접근할 수 있도록 하고 있습니다.

Get.find<CountController>()

이를 확인하기 위해 lib/main.dart 파일을 다음과 같이 수정합니다.

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Get.put(CountController());

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Obx(
              () => Text(
                "${Get.find<CountController>().count.value}",
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: Get.find<CountController>().increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

이전에는 Get.put(CountController());을 사용하여 생성한 controller의 변수를 통해 상태 값에 접근하였지만, 현재 예제에서는 다음과 같이 Get.find<CountController>()를 사용하여 상태 값을 사용하는 것을 알 수 있습니다.

Obx(
  () => Text(
    "${Get.find<CountController>().count.value}",
    style: Theme.of(context).textTheme.headline4,
  ),
),

또한 함수를 실행할 때에도 다음과 같이 Get.find를 사용하는 것을 알 수 있습니다.

floatingActionButton: FloatingActionButton(
  onPressed: Get.find<CountController>().increment,
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

Get.find을 사용하면 Get.put으로 등록한 컨트롤러를 어디에서든 접근하여 사용할 수 있습니다. 이번 예제에서는 같은 파일내에서 사용하였지만, 자식 위젯에서도 사용이 가능합니다. 중요한 점은 Get.put을 사용하여 먼저 컨트롤러를 등록한 후 사용해야 한다는 것입니다. 만약 등록이 되지 않은 컨트롤러에 접근을 한다면 에러가 발생하게 됩니다.

Get.isRegistered

Get.find는 Get.put으로 등록된 컨트롤러만 사용할 수 있으며, 등록되지 않은 컨트롤러를 사용하면 에러가 발생합니다. 이런 문제를 해결하기 위해 다음과 같이 Get.isRegistered를 사용하여 사용하고자 하는 컨트롤러가 등록되어있는지 확인할 수 있습니다.

Get.isRegistered<CountController>()

만약 컨트롤러가 등록이 되어있다면 true를 반환하고, 등록되어 있지 않다면, false를 반환하게 됩니다.

static get to

GetX로 상태를 관리하다보면, Get.find를 사용하여 상태 값에 자주 접근하게 됩니다. 그래서 GetX에서는 다음과 같이 static을 이용하는 패턴을 자주 사용합니다.

static CountController get to => Get.find<CountController>();

이를 확인하기 위해 lib/controller/count_controller.dart 파일을 다음과 같이 수정합니다.

import 'package:get/get.dart';

class CountController extends GetxController {
  static CountController get to => Get.find<CountController>();

  final count = 0.obs;

  void increment() {
    count.value++;
    // count(count.value + 1);
  }
}

이제 lib/main.dart 파일을 다음과 같이 수정합니다.

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Get.put(CountController());

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Obx(
              () => Text(
                "${CountController.to.count.value}",
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: CountController.to.increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

이전에 controller 변수를 사용하여 상태값에 접근하던 방식을 다음과 같이 static을 사용하여 변경하였습니다.

Obx(
  () => Text(
    "${CountController.to.count.value}",
    style: Theme.of(context).textTheme.headline4,
  ),
),
...
floatingActionButton: FloatingActionButton(
  onPressed: CountController.to.increment,
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),