[flutter] get_it를 사용하여 플러터 앱에서 상태 관리 패턴을 어떻게 구현하는가?

30 Nov 2023

flutter

상태 관리는 플러터 앱 개발에서 중요한 부분입니다. 앱의 상태를 효과적으로 관리하고 업데이트하는 것은 사용자 경험에 직결되는 요소입니다. Get_it는 플러터에서 간단하게 상태를 관리하기 위한 훌륭한 패키지 중 하나입니다. 이 글에서는 Get_it를 사용하여 플러터 앱에서 상태 관리 패턴을 어떻게 구현할 수 있는지 알아보겠습니다.

Get_it 패키지란?

Get_it는 의존성 주입(Dependency Injection) 컨테이너 패턴을 구현한 플러터 패키지입니다. 의존성 주입은 코드의 결합도를 줄이고 유지 보수성을 향상시키기 위해 사용되는 디자인 패턴입니다.

Get_it를 사용하면 앱 전역에서 사용되는 객체를 쉽게 관리할 수 있습니다. 객체 인스턴스를 한 번 생성한 후 Get_it 컨테이너에 등록하면, 다른 곳에서 해당 객체를 필요로 할 때 마다 Get_it를 통해 인스턴스를 가져올 수 있습니다.

Get_it 설치하기

Get_it를 사용하기 위해서는 먼저 프로젝트에 해당 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같은 의존성을 추가합니다:

dependencies:
  get_it: ^7.2.0

그리고 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행합니다:

flutter pub get

Get_it를 사용한 상태 관리 패턴 구현하기

Get_it 컨테이너 초기화하기

Get_it 컨테이너를 사용하기 위해 우선 컨테이너를 초기화해야 합니다. 보통 앱이 시작될 때 main 함수에서 컨테이너를 초기화합니다. 아래와 같은 코드를 추가해주세요:
```
void main() {
  // Get_it 컨테이너 초기화
  setupLocator();
   
  // 앱 실행
  runApp(MyApp());
}
   
// Get_it 컨테이너 설정
void setupLocator() {
  GetIt.instance.registerLazySingleton(() => MyService());
}
```
setupLocator 함수에서 registerLazySingleton 메서드를 사용하여 필요한 객체를 컨테이너에 등록합니다. 이 함수를 통해 한 번 생성된 객체는 전역에서 공유되며, 필요할 때 마다 가져올 수 있습니다. 여기서는 MyService라는 예시 객체를 등록하였습니다.
상태 관리 클래스 작성하기

이제 Get_it를 사용해서 객체를 가져올 수 있는 상태 관리 클래스를 작성해보겠습니다. 상태 관리 클래스는 ChangeNotifier 클래스를 상속받아서 구현할 수 있습니다.
```
class CounterNotifier extends ChangeNotifier {
  final MyService _myService = GetIt.instance<MyService>();
   
  int _counter = 0;
   
  int get counter => _counter;
   
  void increment() {
    _counter++;
    _myService.doSomething();
    notifyListeners();
  }
}
```
위 코드에서는 MyService 객체를 Get_it 컨테이너에서 가져와서 사용하고, _counter 상태를 관리합니다. increment 메서드를 호출하면 _counter를 증가시키고, MyService 객체의 doSomething 메서드를 호출합니다. 이후 notifyListeners를 호출하여 상태가 업데이트되었음을 알립니다.
상태 관리 클래스 사용하기

이제 앱에서 상태 관리 클래스를 사용해보겠습니다. 보통 위젯 트리에서 가장 상위에 상태 관리 클래스를 등록하여 해당 클래스를 사용합니다. 예를 들어, MyApp 클래스의 상태 관리 클래스로 CounterNotifier를 사용하려면 다음과 같이 코드를 작성할 수 있습니다:
```
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChangeNotifierProvider(
        create: (_) => CounterNotifier(),
        child: MyHomePage(),
      ),
    );
  }
}
```
이 코드에서 ChangeNotifierProvider 위젯을 사용하여 CounterNotifier를 등록합니다. 그리고 자식 위젯 MyHomePage에서 해당 상태 관리 클래스를 사용할 수 있습니다.

상태 관리 클래스 사용하기

이제 MyHomePage에서 CounterNotifier 객체를 사용해보겠습니다. 상태를 읽기 위해 Provider.of<CounterNotifier>(context).counter와 같은 방식으로 상태 값을 가져올 수 있습니다. 상태를 변경하기 위해 Provider.of<CounterNotifier>(context, listen: false).increment()와 같은 방식으로 increment 메서드를 호출할 수 있습니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Get_it Counter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter value:',
              style: TextStyle(fontSize: 16),
            ),
            Text(
              '${Provider.of<CounterNotifier>(context).counter}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 16),
            RaisedButton(
              onPressed: () {
                Provider.of<CounterNotifier>(context, listen: false).increment();
              },
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 Provider.of 메서드를 사용하여 CounterNotifier 객체를 가져와서 사용합니다.

지금까지 Get_it를 사용하여 플러터 앱에서 상태 관리 패턴을 구현하는 방법에 대해 알아보았습니다. Get_it를 사용하면 의존성 주입 컨테이너를 통해 상태를 쉽게 관리할 수 있고, 앱의 유지 보수성을 향상시킬 수 있습니다. Get_it 패키지에 대해 더 자세한 내용을 알고 싶다면 공식 문서를 참고하시기 바랍니다.

Get_it 패키지란?

Get_it 설치하기

Get_it를 사용한 상태 관리 패턴 구현하기

참고 자료