Flutter - 위젯의 생명주기

유의선·2024년 2월 23일

플러터의 스테이트리스 위젯은 한 번 만들어지면 갱신할 수 없으므로 생명주기가 없다.

그러나 스테이트풀 위젯은 10단계로 구분하는 생명주기가 있다.


1. 상태를 생성하는 createState() 함수

StatefulWidget 클래스를 상속받는 클래스는 반드시 createState() 함수를 호출해야 한다.
이 함수는 다른 생명주기 함수들이 포함된 State 클래스를 반환한다. 즉 위젯의 상태를 생성하는 함수이다.

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  
  State createState() {
    return _MyApp();
  }
}

2. 위젯을 화면에 장착하면 mounted == true

creatState() 함수가 호출되어 상태가 생성되면 곧바로 mounted 속성이 true로 변경된다.
mounted 속성이 true라는 것은 위젯을 제어할 수 있는 buildContext 클래스에 접근할 수 있다는 의미이다. buildContext가 활성화되어야 비로소 setState() 함수를 이용할 수 있다.
따라서 다음처럼 setState() 함수를 호출하기 전에 mounted 속성을 점검 코드로 활용하면 좀 더 안전하게 작성할 수 있다.

if (mounted) {
	setState()
}

3. 위젯을 초기화하는 initState() 함수

initState() 함수는 위젯을 초기화할 때 한 번만 호출된다.
주로 데이터 목록을 만들거나 처음 필요한 데이터를 주고받을 때 호출한다.

initState() 함수를 호출할 때 내부에서 _getJsonData() 함수를 호출해 서버에서 받아온 데이터를 화면에 출력하게 만들 수 있다.


initState() {
	super.initState();
    _getJsonData();
}

4. 의존성이 변경되면 호출되는 didChangeDependencies() 함수

위젯을 초기화하는 initState() 함수가 호출된 후에 이어서 바로 didChangeDependencies() 함수가 호출된다.
이 함수는 데이터에 의존하는 위젯으라면 화면에 표시하기 전에 꼭 호출해야 한다.
주로 상속받은 위젯을 사용할 때 피상속자가 변경되면 호출한다.

5. 화면에 표시하는 build() 함수

build() 함수는 Widget을 반환해 위젯을 화면에 렌더링한다.
build() 함수에서 위젯을 만들고 반환하면 화면에 표시된다.

class _MyApp extends State<MyApp> {

  
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
        
        ...

6. 위젯을 갱신하는 didUpdateWidget() 함수

didUpdateWidget() 함수는 부모 위젯이나 데이터가 변경되어 위젯을 갱신해야 할 때 호출한다.
만약 initState() 에서 특정 이벤트에 의해 위젯이 변경되면 didUpdateWidget() 함수를 호출해 위젯을 갱신할 수 있다.


void didUpdateWidget(Widget oldWidget) {
	if(oldWidget.importantProperty != widget.importantProperty) {
    	_init();
    }
}

7. 위젯의 상태를 갱신하는 setState() 함수

setState() 함수를 이용하면 데이터가 변경되었다는 것을 알려주고 변경된 데이터를 이용해 화면의 UI를 변경할 수 있도록 한다.
플러터 앱을 만들며 제일 많이 호출하는 함수이다.

              child: ElevatedButton(
                  child: Text('$test'),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(_color)),
                  onPressed: () {
                    if(_color == Colors.blue){
                      setState(() {
                        test = 'flutter';
                        _color = Colors.amber;
                      });
                    }else{
                      setState((){
                        test = 'hello';
                        _color = Colors.blue;
                      });
                    }
                  })

8. 위젯의 상태 관리를 중지하는 deactivate() 함수

deactivate() 함수는 State 객체가 플러터의 구성 트리로부터 제거될 때 호출된다.
다만, State 객체가 제거됐다고 해서 해당 메모리까지 지워지지는 않는다. dispose() 함수를 호출하기 전까지는 State 객체를 재사용할 수 있다.

9. 위젯의 상태 관리를 완전히 끝내는 dispose() 함수

dispose() 함수는 State 객체를 영구적으로 소멸할 때 호출한다.
이 함수를 호출한다는 것은 이제 해당 위젯을 종료한다는 뜻이다.
위젯이 소멸할 때 호출해야하는 함수가 있다면 dispose() 함수 안에서 호출해야 한다.

10. 위젯을 화면에서 제거하면 mounted == false

State 객체가 소멸하면 마지막으로 mounted 속성이 false로 되면서 생명주기가 끝난다.
mounted 속성이 false가 되었다는 것은 이 State는 재사용할 수 없다는 의미이다.


스테이트풀 위젯의 생명주기를 표로 정리하면 다음과 같다.

호출 순서생명주기내용
1createState()처음 스테이트풀을 시작할 때 호출
2mounted == truecreateState() 함수가 호출되면 mounted는 true
3initState()State에서 제일 먼저 실행되는 함수. State 생성 후 한 번만 호출
4didChangeDependencies()initState() 호출 후에 호출되는 함수
5build()위젯을 랜더링하는 함수. 위젯을 반환
6didUpdateWidget()위젯을 변경해야 할 때 호출되는 함수
7setState()데이터가 변경되었음을 알리는 함수. 변경된 데이터를 UI에 적용하기 위해 필요
8deactivate()State가 제거될 때 호출
9dispose()State가 완전히 제거되었을 때 호출
10mounted == false모든 프로세서가 종료된 후 mounted가 false로 됨

0개의 댓글