다트 이해하기 - (9) Flutter의 didChangeDependencies 함수

Flutter의 didChangeDependencies 함수란?

Flutter에서 didChangeDependencies 함수는 StatefulWidget의 상태가 변경되었거나, 위젯이 의존하고 있는 어떤 값이 변경되었을 때 호출되는 함수입니다.
쉽게 말해, "위젯이 외부에서 제공받는 데이터가 변경되었을 때 실행되는 함수"입니다.

 

---

didChangeDependencies의 주요 특징

1. 특정 상황에서 호출:
   • 위젯의 의존성이 변경되었을 때 호출됩니다.
   • 예: InheritedWidget의 값이 변경되었을 때.
2. initState 다음에 호출:
   • 위젯이 처음 생성될 때, initState 이후에 한 번 호출됩니다.
   • 그 이후에는 의존성이 변경될 때마다 호출됩니다.
3. 데이터 의존성이 있을 때 사용:
   • 위젯이 상위 위젯에서 제공하는 데이터를 사용할 때, 이 데이터를 다시 불러오거나 처리하는 데 유용합니다.

---

didChangeDependencies 함수의 기본 구조

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  // 의존성 변경 시 수행할 작업
}

• super.didChangeDependencies(): Flutter의 기본 동작을 유지하려면 항상 호출해야 합니다.

---

간단한 예제: InheritedWidget과 함께 사용

아래는 InheritedWidget을 사용해 데이터를 전달하고, didChangeDependencies에서 이 데이터를 처리하는 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

// InheritedWidget 정의
class CounterProvider extends InheritedWidget {
  final int counter;

  CounterProvider({
    required this.counter,
    required Widget child,
  }) : super(child: child);

  @override
  bool updateShouldNotify(CounterProvider oldWidget) {
    return oldWidget.counter != counter;
  }

  static CounterProvider? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterProvider>();
  }
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

  void _incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CounterProvider(
      counter: counter,
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('didChangeDependencies 예제')),
          body: CounterDisplay(),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

class CounterDisplay extends StatefulWidget {
  @override
  _CounterDisplayState createState() => _CounterDisplayState();
}

class _CounterDisplayState extends State<CounterDisplay> {
  int? counter;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // InheritedWidget에서 데이터를 가져옴
    counter = CounterProvider.of(context)?.counter;
    print('didChangeDependencies 호출됨: counter = $counter');
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Counter: $counter',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

실행 결과:

1. 처음 실행하면 Counter: 0이 표시됩니다.
2. 플러스 버튼을 누르면:
   • counter 값이 증가하고, didChangeDependencies가 호출되어 화면이 업데이트됩니다.
   • 콘솔에 didChangeDependencies 호출됨이 출력됩니다.

---

언제 didChangeDependencies를 사용해야 할까?

• InheritedWidget 데이터 의존:
  • 위젯이 상위 위젯에서 데이터를 받을 때, 데이터 변경을 감지하고 싶을 때.
• 외부 의존성 감지:
  • 예: 테마 변경, 지역화(Localization) 데이터 변경.

---

didChangeDependencies와 initState의 차이

initState	didChangeDependencies
위젯이 처음 생성될 때 한 번 호출됨.	처음 생성될 때 한 번 호출되고, 이후 의존성이 변경될 때마다 호출됨.
내부 상태를 초기화하는 데 사용됨.	외부 데이터(의존성) 변경을 감지하고 처리함.
context를 사용할 수 없음	context를 사용할 수 있음.