Colin's Blog
[flutter] Injectable을 사용하여 플러터 앱의 로딩 시간 개선하기

앱의 로딩 시간은 사용자 경험과 앱의 성능에 큰 영향을 미칩니다. 플러터(Flutter) 앱 역시 마찬가지입니다. 만약 앱이 초기화 단계에서 많은 리소스를 로드하고 초기 설정을 한다면, 앱의 시작 속도가 느려지고 사용자들의 기다림을 유발할 수 있습니다.

이 문제를 해결하기 위해 “injectable”을 사용하여 앱의 로딩 시간을 개선해보겠습니다. “injectable”은 종속성 주입(Dependency Injection)을 간편하게 구현할 수 있도록 도와주는 패키지입니다.

injectable 패키지 설치하기

먼저 injectable 패키지를 설치해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 추가하세요:

dependencies:
  injectable: ^1.0.0

그리고 pub get 명령어를 실행하여 패키지를 가져옵니다.

종속성 주입 설정하기

injectable_init.dart 파일을 생성한 후, 다음과 같은 코드를 작성하세요:

import 'package:injectable/injectable.dart';
import 'package:injectable_generator/dependency_config.dart';

@injectableInit
void configureDependencies() => $initGetIt(Injector());

이제 앱의 진입점인 main.dart 파일에서 위에서 작성한 설정을 초기화해야 합니다. 다음과 같이 코드를 수정하세요:

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

void main() {
  configureDependencies(); // 종속성 주입 설정 초기화

  runApp(MyApp());
}

종속성 주입 사용하기

이제 “injectable” 패키지를 사용하여 종속성 주입을 구현할 수 있습니다. 예를 들어, MyService라는 클래스에 대한 종속성을 주입하려면 다음과 같이 코드를 작성하세요:

import 'package:injectable/injectable.dart';

@lazySingleton
class MyService {
  // MyService 클래스의 코드
}

위의 예제에서는 @lazySingleton 어노테이션을 사용하여 MyService 클래스의 인스턴스를 싱글톤으로 생성합니다. 이렇게 하면 앱 전체에서 단 하나의 인스턴스만 사용할 수 있습니다. 또한, 필요한 위치에서 종속성을 주입할 수 있습니다.

종속성을 주입받을 클래스에서 @injectable 어노테이션과 @inject 어노테이션을 사용하여 종속성을 주입하세요. 다음은 예제 코드입니다:

import 'package:injectable/injectable.dart';
import 'my_service.dart';

@injectable
class MyWidget extends StatelessWidget {
  final MyService myService;

  MyWidget(@inject this.myService); // MyService 종속성 주입

  // MyWidget 클래스의 코드
}

위의 예제에서는 MyWidget 클래스의 생성자에서 @inject 어노테이션을 사용하여 MyService 종속성을 주입받습니다.

결론

이제 “injectable” 패키지를 사용하여 플러터 앱의 로딩 시간을 개선할 수 있습니다. 종속성 주입을 사용하면 필요한 종속성을 효율적으로 관리할 수 있으며, 앱의 시작 속도를 개선할 수 있습니다. “injectable” 패키지의 사용법을 숙지하고, 앱에 적절하게 적용해보세요.

참고 자료

© 2018 Colin. All rights reserved.