[Flutter] getX 활용 - 상태 관리 (1)

저번 게시물에서는 getX의 라우팅 관리 기능에 대해 포스팅 했었다.

오늘은 getX의 상태관리 기능에 대해서 알아보겠다.

getX의 상태관리에는 두 가지의 기능이 있다.

• 단순 상태 관리
• 반응형 상태 관리

단순 상태 관리는 Controller에 함수를 작성할 때 상태 값을 변경하고 난 후에 꼭 update() 함수를 호출해야 상태 변경이 발생한 걸 알 수 있다.
Provider의 notifyListener()와 동일한 기능이라고 생각하면 된다.

반면, 반응형 상태 관리는 update 함수를 호출하지 않아도, 내부 로직을 통해 상태 변화를 감지하여 화면을 리렌더링 한다.

우선 단순 상태 관리의 예제 코드부터 살펴보자.

getX를 검색하면 기본적으로 보이는 숫자를 증가시키는 코드다.

나는 프로젝트를 생성하고 코드를 변경하기가 귀찮아서 main.dart에 WithGetX라는 위젯을 보여주게 했다.

main.dart의 코드는 아래와 같다.

import 'package:flutter/material.dart';
import 'package:get/get_navigation/src/root/get_material_app.dart';
import 'package:getx_practice/state/with_getx.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("getX 예제"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Expanded(
              child: WithGetX(),
            )
          ],
        ),
      ),
    );
  }
}

• GetMaterialApp과 WithGetX 파일을 import
• 홈에 보여질 위젯인 WithGetX() 호출

위의 두 가지로 main.dart에 대한 설명은 끝낼 수 있겠다.

그 다음은, 홈에 보여질 with_getx.dart 파일이다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_practice/controller/increase_controller.dart';

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

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

    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GetBuilder<IncreaseController>(builder: (controller) {
          return Text(
            "${controller.count}",
            style: const TextStyle(
              fontSize: 50,
            ),
          );
        }),
        ElevatedButton(
            onPressed:
              controller.increase,
            child: const Text(
              "+",
              style: TextStyle(
                fontSize: 30,
              ),
            ))
      ],
    ));
  }
}

• final controller = Get.put(IncreaseController);
  • getX의 컨트롤러 생성
• "${controller.count}"
  • Text의 내용을 "$controller.count}"로 설정하여 컨트롤러의 값 표시
• onPressed: controller.increase
  • ElevatedButton을 누르면 controller의 increase 함수 실행

아주 간단한 코드이기 때문에, with_getx.dart의 설명도 이정도로 마치겠다.

그 다음은, getX에 사용될 increase_controller.dart의 코드다.

import 'package:get/get.dart';

class IncreaseController extends GetxController{
  int count = 0;

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

• class IncreaseController extends GetxController{ ... }
  • 컨트롤러 사용을 위한 GetxController
• int count = 0;
  • 숫자를 세기 위한 count 변수 선언
• void increase(){ ... }
  • 숫자를 하나씩 증가시키는 코드
  • update() 함수를 통해 상태 변경을 알리는 것이 필수

컨트롤러에 대한 설명은 위와 같다.
단순 상태 관리 코드를 보면, Provider와 아주 비슷하다는 생각이 든다.

GetxController를 ChangeNotifier로 바꾸고 update()를 notifyListener()로 변경하면 프로바이더의 코드가 된다.

이번에는 단순 상태 변경에 내용을 다뤄봤으니, 다음 게시물에서는 반응형 상태 관리에 대해서 알아보겠다.