[flutter] Injectable을 사용하여 플러터 앱의 상태 관리 로직 분리하기

05 Dec 2023

flutter

앱의 상태 관리는 개발자들에게 중요한 과제입니다. 플러터(Flutter) 앱에서는 상태 관리를 쉽게하기 위해 여러 가지 패턴이나 라이브러리를 사용할 수 있습니다. 이번에는 Injectable이라는 라이브러리를 사용하여 플러터 앱의 상태 관리 로직을 분리하는 방법에 대해 알아보겠습니다.

Injectable 라이브러리란?

Injectable은 플러터 앱에서 의존성 주입(Dependency Injection)을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 의존성 주입은 앱의 클래스들 간의 의존성을 외부에서 제공받아 관리하는 패턴입니다. 이를 통해 코드의 유지보수성과 테스트 용이성이 향상됩니다.

설치하기

pubspec.yaml 파일에 Injectable 라이브러리를 추가해야 합니다. 다음과 같이 dependencies 섹션에 추가합니다.

dependencies:
  injectable: ^1.4.0

설치를 완료한 후, 터미널에서 다음 명령어를 실행하여 코드 생성을 진행합니다.

flutter pub run build_runner build

사용 방법

Injectable을 사용하기 위해서는 다음 세 가지 단계를 거쳐야 합니다.

주입 가능한 클래스 생성하기
주입할 클래스 구성하기
주입한 클래스 사용하기

주입 가능한 클래스 생성하기

앱의 상태 관리 로직을 분리하고 주입 가능한 클래스를 생성합니다. 이 클래스에 @injectable 어노테이션을 추가하여 Injectable이 해당 클래스에 주입 가능한 클래스임을 인식할 수 있도록 합니다. 주입 가능한 클래스는 상태 관리 로직이나 비즈니스 로직이 포함될 수 있습니다.

import 'package:injectable/injectable.dart';

@injectable
class CounterService {
  int count = 0;

  void increment() {
    count++;
  }
}

주입할 클래스 구성하기

Injectable을 사용하여 앱에서 주입 가능한 클래스를 구성합니다. 이는 주로 main 함수 또는 앱 진입점에서 이루어집니다. @module 어노테이션을 추가하여 Injectable이 해당 클래스를 주입 가능한 클래스로 인식할 수 있도록 합니다.

import 'package:injectable/injectable.dart';
import 'package:your_app_name/your_injectable_file.dart';

void main() {
  configureInjection(YourInjectableFile());
}

@module
class YourInjectableFile extends RegisterModule {}

주입한 클래스 사용하기

이제 주입 가능한 클래스를 사용하여 앱에서 상태 관리 로직을 분리합니다. 주입 가능한 클래스의 인스턴스를 필요한 곳에서 생성하여 사용하면 됩니다.

import 'package:flutter/material.dart';
import 'package:injectable/injectable.dart';
import 'package:your_app_name/counter_service.dart';

@injectable
class HomePage extends StatelessWidget {
  final CounterService counterService;

  const HomePage({required this.counterService});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Injectable Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: ${counterService.count}'),
            ElevatedButton(
              onPressed: () {
                counterService.increment();
              },
              child: const Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 예시에서는 CounterService 클래스가 주입되어 앱의 상태 관리 로직을 처리합니다.

Injectable을 사용하여 플러터 앱의 상태 관리 로직을 분리하면 코드의 가독성, 재사용성 및 유지보수성이 향상됩니다. 주입 가능한 클래스를 사용하여 의존성 주입을 적용하면 앱의 개발과 테스트를 더욱 효율적으로 진행할 수 있습니다.