공log/[Flutter]

[Flutter] 플러터 #21 - AutoDisposeModifier

ming_OoO 2023. 5. 26. 20:27
728x90

AutoDisposeModifier에 대해서 알아보겠습니다.

AutoDisposeModifier는 Riverpod에서 제공하는 기능 중 하나로, Provider가 더 이상 사용되지 않을 때 자동으로 제거되도록 도와줍니다. 이를 통해 메모리 누수와 관련된 문제를 방지하고 애플리케이션의 성능과 안정성을 향상시킬 수 있습니다.

 

AutoDisposeModifier의 개념을 이해하기 위해 Provider의 생명주기를 간략히 살펴보겠습니다. 일반적으로 Provider는 사용자에게 데이터를 제공하고 해당 데이터가 필요하지 않을 때까지 유지됩니다. 그러나 Provider를 사용하는 위젯이 해제되거나 다른 상태로 전환될 때 Provider는 수동으로 제거되어야 합니다. 이러한 수동 제거 과정을 자동으로 처리해주는 것이 AutoDisposeModifier입니다.

 

AutoDisposeModifier의 장점은 다음과 같습니다:

  1. 메모리 관리: AutoDisposeModifier를 사용하면 Provider가 더 이상 사용되지 않을 때 자동으로 제거되므로 메모리 누수를 방지할 수 있습니다. 사용하지 않는 Provider가 메모리에 남아있는 상황을 방지하여 애플리케이션의 성능과 안정성을 향상시킵니다.
  2. 편의성: AutoDisposeModifier를 사용하면 Provider의 수동 제거 과정을 처리할 필요가 없으므로 코드를 간결하게 유지할 수 있습니다. 제거 작업을 자동화하여 개발자가 신경 써야 할 부분을 줄여줍니다.

 

AutoDisposeModifier의 사용방법은 다음과 같습니다:

  1. AutoDisposeModifier를 사용하려는 Provider에 `.autoDispose`를 추가하여 정의합니다. 이렇게 함으로써 해당 Provider는 사용하지 않을 때 자동으로 제거되도록 설정됩니다.
  2. AutoDisposeModifier를 사용하는 ConsumerWidget에서는 AutoDisposeWidget을 상속받아야 합니다. AutoDisposeWidget은 해당 위젯이 속한 위젯 트리가 변경될 때 Provider의 상태를 관찰하고 자동으로 처리합니다.
  3. AutoDisposeModifier를 사용하는 ConsumerWidget 내에서 해당 Provider를 구독하고 상태를 관찰합니다. Provider를 사용하는 위젯이 해제되거나 다른 상태로 전환되면 자동으로 Provider가 제거됩니다.

 

AutoDisposeModifier의 예시를 살펴보겠습니다.

 autoDisposeModifierProvider를 정의한 코드입니다.

// 어떤 Provider를 사용해도 문제는 없는데, 일단 여기선 future provider을 사용할 예정
import 'package:flutter_riverpod/flutter_riverpod.dart';

// .family와 다르게 값을 자동으로 삭제해주는 개념이라 data와 같은 추가적인 데이터가 들어가지 않음

// ** autoDispose와 family의 차이점 **
// autoDispose는 자동으로 값을 삭제하는 것이기에 필요없을 때 삭제하고, 필요할 때 다시 생성한다.
// family를 비롯하여 future provider의 경우 데이터를 캐싱하기에 페이지에서 나간 후 다시 들어가면 로딩 인디케이터가 뜨지 않지만
// autoDispose는 페이지에서 나갈 경우, 데이터가 삭제되기에 다시 들어가면 로딩 인디케이터가 다시 뜬다는 특징이 있다.

// 결론: 그래서 autoDispose provider를 사용하는 이유는 사용하지 않을 때는 데이터가 삭제되어야 하는 provider를 생성할때 이 키워드를 사용한다..
final autoDisposeModifierProvider =
    FutureProvider.autoDispose<List<int>>((ref) async {
  await Future.delayed(Duration(seconds: 2));

  return [1, 2, 3, 4, 5];
});
  • autoDisposeModifierProvider는 FutureProvider.autoDispose를 사용하여 생성된 Provider입니다.
  • Provider의 값은 List<int> 형태이며, ref를 매개변수로 받는 비동기 함수 내에서 데이터를 반환합니다.
  • autoDisposeModifierProvider는 자동으로 값이 삭제되는 Provider이므로, 해당 Provider를 사용하지 않을 때는 값이 제거되고, 다시 사용할 때는 값이 다시 생성됩니다.

 

다음은 autoDisposeModifierProvider를 구독한 코드입니다.

import 'package:ex_state/riverpod/auto_dispose_modifier_provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class AutoDisposeModifierScreen extends ConsumerWidget {
  const AutoDisposeModifierScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(autoDisposeModifierProvider);

    return DefaultLayout(
      title: 'AutoDisposeModifierScreen',
      body: Center(
        child: state.when(
          data: (data) => Text(data.toString()),
          error: (err, stack) => Text(err.toString()),
          loading: () => CircularProgressIndicator(),
        )
      ),
    );
  }
}
  • AutoDisposeModifierScreen은 ConsumerWidget을 상속받은 위젯입니다.
  • ref.watch(autoDisposeModifierProvider)를 통해 autoDisposeModifierProvider를 구독하고 해당 Provider의 상태를 관찰합니다.
  • state.when을 사용하여 Provider의 상태에 따라 적절한 위젯을 반환합니다.

위 코드들의 실행결과입니다.

  • autoDisposeModifierProvider는 2초의 딜레이 후에 [1, 2, 3, 4, 5]를 반환합니다.
  • 위젯이 처음 빌드될 때는 로딩 인디케이터가 표시됩니다.
  • 2초 후에 데이터가 준비되면 data 콜백이 호출되고, 데이터가 텍스트로 출력됩니다.

AutoDisposeModifier의 역할은 사용하지 않을 때 자동으로 Provider를 제거하는 것입니다. 예시 코드에서는 autoDisposeModifierProvider를 사용하지 않을 때 해당 Provider의 값이 삭제되고, 다시 사용할 때 값이 다시 생성됩니다. 이를 통해 불필요한 메모리 사용을 방지하고, 필요한 시점에서만 Provider를 유지하여 애플리케이션의 성능과 메모리 관리를 개선할 수 있습니다.

 

AutoDisposeModifier를 사용하면 Provider의 수동 제거 과정을 자동화하여 메모리 누수와 관련된 문제를 방지할 수 있습니다. 이를 통해 개발자는 메모리 관리에 신경 쓰지 않고 애플리케이션의 핵심 로직에 집중할 수 있습니다.

728x90