[Flutter] getX 활용법 - 의존성 주입

오늘은 GetX의 의존성 주입에 대해 알아보도록 하겠다.

의존성 주입이란 컨트롤러를 인스턴스화 시키는 것을 말하는데, GetX에는 총 네 가지의 방법이 있다.

• Get.put: 페이지로 이동할 때 생성(create), 초기화(initialized)되며 페이지에서 나갈 때 delete
• Get.lazyPut: 페이지로 이동할 때가 아닌, 무언가 변화가 생겼을 때 create, inintalized
• Get.putAsync: 데이터에 가공 처리 등을 한 후 인스턴스화 해야 할 때 사용
• Get.create: 동작이 일어날 때마다 인스턴스 생성

개념은 위와 같고, 특징이라고 하자면 put, lazyPut, putAsync는 싱글톤이기 때문에 인스턴스를 단 한 번 생성하지만, create는 동작/변화가 발생할 때마다 인스턴스를 생성한다는 점을 들 수 있겠다.

코드 예시로 살펴보자.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx/controller/dependency_controller.dart';
import 'package:getx/page/get_lazy_put.dart';
import 'get_put.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        ElevatedButton(
            onPressed: () {
              Get.to(const GetPut(), binding: BindingsBuilder(() {
                Get.put(DependencyController());
              }));
            },
            child: Text("Get.put")),
        ElevatedButton(
            onPressed: () {
              Get.to(const GetLazyPut(), binding: BindingsBuilder(() {
                Get.lazyPut<DependencyController>(() => DependencyController());
              }));
            },
            // 컨트롤러에 접근하려 할 때 메모리에 올림
            // 접근을 하려 할때 그제서야 intialized
            child: Text("Get.lazyPut")),
        // 바로 intialized
        // 페이지에 접근할 때 데이터에 가공을 하고 해야 할 때
        // 아래 코드는 5초 후에 initialized 해줌
        ElevatedButton(
            onPressed: () {
              Get.to(const GetPut(), binding: BindingsBuilder(() {
                Get.putAsync<DependencyController>(() async {
                  await Future.delayed(Duration(seconds: 5));
                  return DependencyController();
                });
              }));
            },
            child: Text("Get.putAsync")),
        // 위의 세 개는 싱글톤이었음, 한 번 생성하면 그 뒤로 생성 X
        // 버튼을 누를 때마다 인스턴스를 생성해줌
        ElevatedButton(
            onPressed: () {
              Get.to(const GetPut(), binding: BindingsBuilder(() {
                Get.create<DependencyController>(() => DependencyController());
              }));
            },
            child: Text("Get.create"))
      ]),
    ));
  }
}

내 GetX 게시물은 모두 유튜버 '개발하는 남자'님의 강의를 보고 요약한 것인데, 코드만 보고서는 이해가 잘 안 되는 분들을 위해 코드의 주석까지 그대로 올린다.

화면의 구성은 간단하게 버튼 네 개로 되어있고, 각각 onPressed 시 순서대로 put, lazyPut, putAsync, create가 동작된다.

버튼들을 누르면 각각의 페이지로 이동하게 되는데, 아래는 put, putAsync, create를 눌렀을 때 이동하는 get_put.dart 코드다.

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: ElevatedButton(
          child: Text(""),
          onPressed: () {
            print(Get.find<DependencyController>().hashCode);
            Get.find<DependencyController>().increase;
          },
        ));
  }
}

• print(...): 버튼 클릭 시 인스턴스 값을 콘솔에 띄워주는 코드

복잡한 코드는 아니라서 위의 한 줄로 설명이 될 것 같다.

컨트롤러의 increase 함수에는 기능이 없어서, 코드를 보여주지 않고 넘어가겠다.

그 다음은 putLazy 버튼을 눌렀을 때 이동하는 get_lazy_put.dart 코드다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx/controller/dependency_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: ElevatedButton(
          child: Text(""),
          onPressed: () {
            Get.find<DependencyController>().increase;
          },
        ));
  }
}

역시 특별한 기능은 없다.
동작이 발생해야 initialized 되는 것을 확인하기 위해 버튼만 하나 만들어뒀다.

게시물 초반부에 create만 싱글톤이 아니라고 했었는데, 그 차이를 확인해보자.

Get.put 버튼을 누르면 콘솔창이 아래와 같이 나온다.

보이는 바와 같이 여러 번 버튼을 눌러도, create와 initialized가 한 번만 출력되고, 해시코드도 749971821로 하나만 출력된다.
하나의 인스턴스만 생성된다는 뜻이다.

Get.create의 콘솔도 확인해보자.

put과는 다르게 클릭할 때마다 initialized가 실행되고, 각 인스턴스의 해시코드도 다르게 출력되는 걸 볼 수 있다.
클릭할 때마다 새로운 인스턴스가 생성되는 것이다.

플러터를 처음 접해보시는 분이라면 개발하는 남자 님의 유튜브에 자세하게 설명이 되어 있으니 다들 한 번씩 참고햅길 추천드린다.

다음에는 GetX의 바인딩에 대해서 알아보겠다.