플러터 GetX 사용법 및 예제: 상태 관리 하기

by

Flutter에서 GetX는 상태 관리, 라우트 관리, 의존성 주입 등 애플리케이션 개발에 필수적인 여러 기능을 간편하게 사용할 수 있게 해주는 경량화된 라이브러리입니다. 이번 글은 GetX의 기본적인 사용법에 대해서 작성하며, 플러터 GetX를 어떻게 활용할 수 있는지 알아보겠습니다.

상태관리의 필요성

플러터 상태관리는 앱의 생명주기 동안 사용자 인터페이스(UI)의 상태를 효과적으로 관리하기 위해 필수적입니다. 상태란 앱이 작동하는 동안 변경될 수 있는 모든 데이터를 의미합니다. 예를 들어, 사용자가 앱에서 어떤 버튼을 클릭하면 그에 따라 화면에 표시되는 정보가 변경되어야 합니다. 이때, 상태 관리 기법을 사용하지 않는다면 코드가 복잡해지고 유지 보수가 어려워집니다.

GetX이란?

GetX는 Flutter에서 상태 관리를 비롯해 다양한 기능을 제공하는 라이브러리입니다. GetX의 장점은 간결한 코드, 빠른 개발 속도, 그리고 높은 성능입니다. GetX를 사용하면 단 몇 줄의 코드만으로 상태 관리, 의존성 주입, 라우트 관리 등을 할 수 있어 개발 과정을 대폭 단순화할 수 있습니다.

패키지 설치

GetX를 사용하기 위해서는 먼저 pubspec.yaml 파일에 GetX 패키지를 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.0.0

GetX 사용법

상태 관리는 GetX의 핵심 기능 중 하나입니다. GetX에서는 .obs를 사용하여 변수를 관찰 가능한 상태로 만들고, Obx() 위젯 또는 GetX() 위젯을 사용하여 UI를 해당 상태에 반응하게 할 수 있습니다. 예를 들어, 간단한 카운터 애플리케이션을 GetX를 사용하여 구현해보겠습니다.

CounterController 생성

우선, 카운터의 상태를 관리할 컨트롤러 클래스를 생성합니다. 이 클래스는 GetxController를 상속받아야 하며, 상태 변수에 .obs를 사용하여 반응형 상태로 만듭니다.

import 'package:get/get.dart';

class CounterController extends GetxController {
  var count = 0.obs; // 반응형 상태로 만듦
}

UI에 상태 바인딩

Obx() 위젯을 사용하여 컨트롤러의 상태를 UI에 바인딩합니다. Obx()는 자식 위젯이 반응형 상태에 의존할 때마다 자동으로 자식 위젯을 다시 빌드하도록 합니다.

Obx(() => Text('Clicks: ${c.count}', style: TextStyle(fontSize: 20)))

상태 변경

사용자가 버튼을 클릭할 때마다 카운터의 값을 증가시키거나 감소시키는 로직을 추가합니다. 이를 위해 컨트롤러 내에 increment()와 decrement() 메서드를 정의합니다.

void increment() {
  count++;
}

void decrement() {
  count--;
}

의존성 주입과 라우트 관리

GetX는 의존성 주입과 라우트 관리도 간단히 할 수 있게 해줍니다. Get.put(), Get.lazyPut(), Get.find() 등의 메서드를 사용하여 컨트롤러와 서비스를 관리할 수 있으며, Get.to(), Get.off(), Get.back() 등을 사용하여 화면 간의 네비게이션을 쉽게 할 수 있습니다.

전체 코드

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

class CounterController extends GetxController {
  var count = 0.obs; // '.obs'를 사용하여 변수를 반응형 상태로 만들어 줍니다.

  void increment() {
    count++; // count 값을 증가시킵니다.
  }

  void decrement() {
    count--; // count 값을 감소시킵니다.
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // GetMaterialApp은 MaterialApp을 대체하여 GetX 기능을 사용할 수 있게 해줍니다.
    return GetMaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  final CounterController c =
      Get.put(CounterController()); // 컨트롤러의 인스턴스를 생성하고 의존성을 주입합니다.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Counter Example')), // 앱바 제목
      body: Center

플러스 버튼을 누르면 숫자가 상승 마이너스 버튼을 누르면 숫자가 감소합니다.

플러터-getx-예제

마무리

Flutter 개발에서 GetX를 사용하면 상태 관리, 의존성 주입, 라우트 관리 등을 더욱 쉽고 효율적으로 할 수 있습니다. GetX의 간결하고 성능이 뛰어난 API는 앱을 빠르게 개발할 수 있게 도와줍니다. 이번 글을 통해 GetX의 기본적인 사용법을 익히고, Flutter 앱 개발에 GetX를 활용해 보세요. 읽어주셔서 감사합니다.

Provider에 관한 글입니다. 참고 부탁드립니다.

플러터 Provider 사용법 및 예제: 상태 관리 하기

StatefulWidget, StatelessWidget에 관한 글입니다. 참고 부탁드립니다.

플러터 상태관리, StatefulWidget, StatelessWidget – 메모장 앱 만들기 (4) 

Leave a Comment