[flutter] getx의 rx는?

 

Rx는 "Reactive Extensions"의 약자입니다. 반응형 프로그래밍은 데이터 스트림과 변화의 전파에 중점을 둔 프로그래밍 패러다임입니다. Rx는 이러한 반응형 프로그래밍을 구현하기 위한 다양한 라이브러리 및 API를 의미하며, GetX에서는 Rx 객체를 통해 반응형 상태 관리를 쉽게 할 수 있도록 해줍니다.

 

---

GetX는 Flutter 애플리케이션 개발을 위한 강력한 상태 관리 및 라우팅 라이브러리입니다. GetX에서 Rx는 반응형(reactive) 프로그래밍을 위해 사용되는 클래스이며, 이는 상태 변화에 따라 자동으로 UI를 업데이트하는 것을 의미합니다.
Rx는 반응형 변수를 만들기 위해 사용되며, 다음과 같은 방법으로 사용할 수 있습니다.

 

import 'package:get/get.dart';

class CounterController extends GetxController {
  // RxInt는 반응형 정수형 변수를 나타냅니다.
  var count = 0.obs;

  // 증가 메서드
  void increment() {
    count++;
  }
}

 

위 예제에서 0.obs는 RxInt의 약어로, GetX가 제공하는 반응형 변수를 뜻합니다. obs는 immutable 타입을 반응형 타입으로 변환합니다.

이제 이 변수를 사용하는 UI 부분은 다음과 같습니다.

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

class Home extends StatelessWidget {
  // Controller 인스턴스를 사용하여 변수를 접근해야 합니다.
  final CounterController c = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("GetX Example")),
      body: Center(
        // Obx 위젯은 반응형 상태를 감지하여 업데이트합니다.
        child: Obx(
          () => Text(
            'Count: ${c.count}',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: c.increment,
      ),
    );
  }
}

 

Obx 위젯은 count 값이 변경될 때마다 UI를 자동으로 다시 빌드하게 합니다. 즉, 전체적인 GetX의 Rx 개념은 코드에서 상태 변화를 쉽게 관리하고 UI와 데이터 간의 단방향 데이터 흐름을 허용하여 더 깨끗하고 유지보수가 쉬운 코드를 작성하는 데 도움이 됩니다.