Flutter의 Widget은 앱의 화면을 구성하는 기본 요소입니다.
Widget은 생성, 업데이트, 삭제되는 과정을 거치며, 이러한 과정을 Lifecycle이라고 합니다.
이번 포스팅에서는 앱의 동작을 좀더 자세히 알기 위해 Widget의 Lifecycle을 확인해 보겠습니다.
Widget Lifecycle 개요도
1. createState()
createState() 함수는 StatefulWidget에 의해 호출되어, Widget의 상태를 관리하는 State 클래스를 반환합니다.
이 과정은 Widget이 처음 생성될 때 발생합니다.
Example)
이 코드에서 MyHomePage Widget은 _MyHomePageState라는 State 클래스를 생성합니다.
_MyHomePageState 클래스는 MyHomePage Widget의 상태를 관리하는 역할을 합니다.
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}2. mounted == true
상태가 생성된 후, mounted 속성은 true가 됩니다.
이는 Widget이 현재 Widget Tree에 존재하며, BuildContext에 접근 가능함을 의미합니다.
이 상태에서만 setState() 함수를 호출할 수 있습니다.
3. initState()
initState() 함수는 Widget이 초기화될 때 단 한 번만 호출됩니다.
여기서 필요한 초기화 작업을 진행할 수 있습니다.
Example)
이 코드에서 _counter 변수를 10으로 초기화합니다.
@override
void initState() {
_counter = 10;
super.initState();
}4. didChangeDependencies()
initState() 호출 이후, didChangeDependencies() 함수가 실행됩니다.
이는 Widget이 의존하는 객체가 변경될 때 호출되며, 주로 상속받은 Widget의 변화에 대응하기 위해 사용됩니다.
5. build()
build() 함수는 Widget을 구성하고 화면에 렌더링(Rendering)합니다. 이
함수는 Widget의 상태가 변경될 때마다 호출됩니다.
Example)
이 코드에서 _counter 변수의 값을 화면에 표시하는 Text Widget을 반환합니다.
@override
Widget build(BuildContext context) {
return Text('count: $_counter');
}6. didUpdateWidget()
Widget의 설정이 변경될 때 didUpdateWidget() 함수가 호출됩니다.
예를 들어, 부모 Widget 으로부터 전달받은 데이터가 변경되었을 때 이 함수가 실행됩니다.
7. setState()
데이터 변경을 알리고 UI를 갱신하기 위해 setState() 함수를 사용합니다.
이 함수는 Widget의 상태가 변경될 때마다 호출됩니다.
Example)
이 코드에서 _counter 변수의 값을 1 증가시키고, setState() 함수를 호출하여 UI를 갱신합니다.
void _incrementCounter() {
setState(() {
_counter++;
});
}8. deactivate()
Widget이 Widget Tree에서 제거될 때 deactivate() 함수가 호출됩니다.
이는 Widget이 일시적으로 화면에서 사라질 때 발생합니다.
9. dispose()
dispose() 함수는 State 객체가 영구적으로 제거될 때 호출됩니다.
이는 Widget이 완전히 종료될 때 사용됩니다.
Example)
이 코드에서 dispose() 함수를 호출하여 State 객체를 정리합니다.
@override
void dispose() {
super.dispose();
}10. mounted == false
dispose() 이후에는 mounted 속성이 false가 되며, 더 이상 setState()를 호출할 수 없습니다.
요약
- Created: 위젯이 처음 생성되는 단계입니다.
- Mounted: 위젯이 화면에 나타나는 단계입니다.
- Updated: 위젯의 상태가 변경되는 단계입니다.
- Detached: 위젯이 화면에서 사라지는 단계입니다.
- Unmounted: 위젯이 완전히 제거되는 단계입니다.
참고 링크
https://dev.to/pranjal-barnwal/the-journey-of-a-widget-understanding-the-lifecycle-in-flutter-3plp
