Flutter -> get x 사용해보기

lib/
├── app/
│   ├── bindings/
│   │   └── home_binding.dart
│   ├── controllers/
│   │   └── home_controller.dart
│   ├── data/
│   │   ├── models/
│   │   ├── providers/
│   │   └── repositories/
│   ├── modules/
│   │   └── home/
│   │       ├── views/
│   │       └── widgets/
│   ├── routes/
│   │   └── app_pages.dart
│   └── utils/
│       └── constants.dart
└── main.dart

## 들어가며

Flutter 앱을 개발할 때 가장 중요한 것은 효율적인 상태 관리와 명확한 아키텍처입니다. 이번 포스트에서는 이번에 공부를 시작한getx 를 소개시켜 드리겠습니다. 아직 저도 잘 몰라서 공식문서를 되도록 많이 참고했습니다.

## GetX란?

GetX는 Flutter를 위한 강력하고 가벼운 솔루션으로, 다음 세 가지 핵심 기능을 제공합니다:

1. 상태 관리 (State Management)
2. 라우트 관리 (Route Management)
3. 종속성 관리 (Dependency Management)

## 프로젝트 구조

우선 GetX를 활용한 프로젝트의 기본 구조를 살펴보겠습니다:



## 상태 관리 예제

GetX의 상태 관리를 실제 예제로 살펴보겠습니다.

### 1. 컨트롤러 정의

// home_controller.dart
class HomeController extends GetxController {
  // Observable 변수
  final _count = 0.obs;
  final _user = Rxn<User>();
  final _isLoading = false.obs;

  // Getter
  int get count => _count.value;
  User? get user => _user.value;
  bool get isLoading => _isLoading.value;

  // Methods
  void increment() {
    _count.value++;
    update();
  }

  Future<void> fetchUser() async {
    try {
      _isLoading.value = true;
      final result = await userRepository.getUser();
      _user.value = result;
    } finally {
      _isLoading.value = false;
    }
  }
}

### 2. 바인딩 설정

// home_binding.dart
class HomeBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => HomeController());
    Get.lazyPut(() => UserRepository());
  }
}

// home_view.dart
class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: Obx(() {
          if (controller.isLoading) {
            return const CircularProgressIndicator();
          }
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Count: ${controller.count}'),
              if (controller.user != null)
                Text('User: ${controller.user!.name}'),
              ElevatedButton(
                onPressed: controller.increment,
                child: const Text('Increment'),
              ),
            ],
          );
        }),
      ),
    );
  }
}

## 라우트 관리

GetX의 라우트 관리 기능을 활용한 예제입니다.

// app_pages.dart
class AppPages {
  static final routes = [
    GetPage(
      name: Routes.HOME,
      page: () => const HomeView(),
      binding: HomeBinding(),
    ),
    GetPage(
      name: Routes.DETAIL,
      page: () => const DetailView(),
      binding: DetailBinding(),
      transition: Transition.rightToLeft,
    ),
  ];
}

// 라우트 사용 예제
Get.toNamed(Routes.DETAIL, arguments: {'id': 1});

## 종속성 주입

GetX의 종속성 주입을 활용한 서비스 레이어 구현 예제입니다.

// api_service.dart
class ApiService extends GetxService {
  final Dio _dio = Dio();

  Future<Response> getUser(int id) async {
    return await _dio.get('/users/$id');
  }
}

// 서비스 초기화
void initServices() async {
  await Get.putAsync(() async => ApiService());
}

// 서비스 사용
final apiService = Get.find<ApiService>();

## GetX의 장점

1. **간단한 상태 관리**
   - `.obs` 변수와 `Obx` 위젯으로 간단하게 반응형 상태 관리
   - 복잡한 보일러플레이트 코드 불필요 -> (보일러플레이트가 뭐지 라는 의견이 있으신분들은 이 포스트를 참고해보세요) https://charlezz.medium.com/%EB%B3%B4%EC%9D%BC%EB%9F%AC%ED%94%8C%EB%A0%88%EC%9D%B4%ED%8A%B8-%EC%BD%94%EB%93%9C%EB%9E%80-boilerplate-code-83009a8d3297

2. **성능 최적화**
   - 필요한 위젯만 업데이트
   - 메모리 효율적인 상태 관리

3. **편리한 종속성 주입**
   - 간단한 서비스 로케이터 패턴 구현
   - 테스트가 용이한 구조

4. **직관적인 라우팅**
   - 네비게이션 2.0의 복잡성 해결
   - 선언적 라우트 정의



## 마치며

GetX는 Flutter 앱 개발을 위한 강력하고 효율적인 도구입니다. 적절한 아키텍처 설계와 함께 사용하면, 유지보수가 용이하고 확장 가능한 앱을 개발할 수 있습니다. 이 포스트에서 다룬 내용들이 여러분의 Flutter 앱 개발에 도움이 되길 바랍니다.

새로시작하는 프로젝트에서 유지보수가 최대한 용이하게 진행하기 위해서 처음 사용해보는 getx 를 용감하게 골랐습니다. 이 포스트에서 다룬 내용들이 여러분의 flutter 학습에 도움이 되길바랍니다,,

## 참고 자료
- [GetX 공식 문서](https://github.com/jonataslaw/getx)
- [Flutter 공식 문서](https://flutter.dev/docs)