[flutter] 플러터(Flutter)에서 상태 관리를 위해 GetX 패키지를 어떻게 사용하나요?

04 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크입니다. 앱의 복잡성이 증가하면 상태 관리가 더욱 중요해집니다. GetX 패키지는 플러터에서 효율적인 상태 관리를 위한 강력한 도구입니다. 이번 포스팅에서는 GetX 패키지를 사용하여 플러터 앱에서 상태 관리를 어떻게 수행하는지 알아보겠습니다.

GetX 패키지 설치하기

GetX 패키지를 사용하기 위해 프로젝트에 의존성(dependency)을 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 아래와 같이 GetX 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.3.8

그리고 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

Controller 생성하기

GetX의 핵심은 상태 관리를 담당하는 Controller 클래스입니다. Controller 클래스는 GetX의 Reactive 상태 관리 기능과 함께 사용됩니다. 먼저 Controller 클래스를 생성해보겠습니다.

import 'package:get/get.dart';

class MyController extends GetxController {
  // 상태를 저장할 변수들을 선언합니다.
  var count = 0;

  // count 변수를 갱신하는 메소드를 정의합니다.
  void increment() {
    count++;
    update(); // 상태를 갱신하기 위해 update() 메소드를 호출합니다.
  }
}

위의 예제에서는 MyController 클래스를 생성하고, count 변수를 선언하여 상태를 저장합니다. increment 메소드는 count 변수를 증가시키고, update() 메소드를 호출하여 변경된 상태를 알립니다.

Controller 사용하기

이제 Controller 클래스를 사용하여 플러터 앱에서 상태를 관리해보겠습니다. 이 예제에서는 단순한 카운터 앱을 구현하겠습니다.

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

class MyHomePage extends StatelessWidget {
  // MyController 인스턴스를 생성합니다.
  final MyController controller = Get.put(MyController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX Counter"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // count 변수를 바라보는 Obx 위젯을 사용하여 화면을 갱신합니다.
            Obx(() => Text(
              "Count: ${controller.count}",
              style: TextStyle(fontSize: 24),
            )),
            SizedBox(height: 16),
            RaisedButton(
              child: Text("Increment"),
              onPressed: () {
                // 버튼을 누를 때마다 increment 메소드를 호출하여 count 변수를 갱신합니다.
                controller.increment();
              },
            ),
          ],
        ),
      ),
    );
  }
}

위의 예제에서 Get.put(MyController())를 사용하여 MyController의 인스턴스를 생성하고 GetX의 의존성 주입(Dependency Injection) 기능을 활용합니다. 그리고 Obx 위젯을 사용하여 controller.count 변수를 바라보고 있음을 알려줍니다. Obx 위젯은 상태가 변경될 때마다 화면을 자동으로 갱신합니다.

결론

GetX 패키지를 사용하면 플러터 앱에서 효과적인 상태 관리를 할 수 있습니다. 이번 포스팅에서는 GetX 패키지의 기본 사용법에 대해 알아보았습니다. GetX는 다양한 기능과 강력한 상태 관리 기능을 제공하므로, 상태 관리가 필요한 플러터 프로젝트에서는 고려해 볼만한 선택지입니다. GetX의 공식 문서를 참조하여 더 자세한 내용을 살펴보시기 바랍니다.