플루터 라이프 사이클(Flutter Life Cycle) 무엇일까.

Life Cycle?

widget이 언제 만들어지고 보여지고 사라지는지에 대한 흐름입니다. 

widget에 대한 탄생과 죽음 과정이라고 생각하면 될 것 같습니다. 

그럼 왜 life cycle이 중요할까. 

데이터를 불러오거나 리소스를 정리하거나 화면을 다시 그릴 타이밍을 알기 위해서 입니다. 

life cycle을 알지 못하면 data flow 따라가지 못하게 되고 정확한 유지보수가 어렵습니다. 

즉 정리하면 statelesswidget, statefulwidghet에 대한 생성과 소멸에 대한 개념입니다. 

 

StatelessWidget Life Cycle

원리는 간단합니다. 

생성자와 빌드함수가 있을 때, 누가 먼저 출력되는지 확인해보면 됩니다. 

statelesswidghet life cycle은 생성자가 실행되고 빌드 함수가 실행됩니다. 

statelesswidghet은 정적으로 단순한 Life Cycle을 가지고 있습니다. 

class CustomWidget extends StatelessWidget {
  CustomWidget({super.key}){
    print('custom 생성자');
  }

  @override
  Widget build(BuildContext context) {
    print('custom 빌드');
    return Container(
      width: 50,
      height: 50,
      color: Colors.green,
    );
  }
}

 

StatefulWidget Life Cycle

statefulwidghet은 statelesswidght 비해서 복잡합니다. 

아래 이미지에서는 껍데기인 뷰 부분을 빨간색으로 동작을 담당하는 부분을 노란색으로 표현했습니다. 

구조는 나눠져 있지만 결국 하나의 라이프 사이클로 동작하므로 참고해주세요.

 

생성자(constructor)

위젯이 처음 코드에 의해 만들어질 때, 생성됩니다. 

파라미터 데이터를 받아 state 객체를 만드는 역할을 합니다. 

 

createstate

state 만드는 시점에 생성됩니다. 

위젯과 연결된 상태 객체를 반환합니다. 

빨간색 부분에서 노란색 영역으로 데이터를 반환한다고 이해하면 됩니다. 

 

initstate

state 객체가 생성되고 최초 한번만 호출됩니다. 

네트워크 요청 및 컨트롤러 생성, 초기값 설정을 하게 됩니다. 

 

didchangedependencies

inistate 직후 또는 상위(빨간색) 위젯이 변경될 때 실행 됩니다. 

상위 위젯에서 주는 데이터를 의존성 처리 합니다. 

 

dirty

상태가 변경되어 화면을 다시 그려야할 때 실행 됩니다. 

build 직전 단계로 setstate 호출시 계속 실행 됩니다. 

해당 단계는 내부 엔진 개념이라 개발자가 직접 호출할 수 없습니다. 

 

build

dirty 상태일 때, 또는 최초 화면을 그릴 때 실행 됩니다. 

위젯 트리를 다시 그리는 역할을 합니다. 

우리가 시각적으로 변경된 위젯을 보기 위해서는 반드시 build가 이뤄줘야 합니다. 

 

clean

build 후, 더 이상 그릴 위젯이 없을 때 실행 됩니다. 

이 때 dirty 상태가 해제됩니다. 

dirty 마찬가지로 엔진 내부 개념이라 개발자가 확인 불가능 합니다. 

 

deactivate

위젯이 트리에서 제거되거나 위치가 변경될 때 실행 됩니다. 

위젯을 UI에서 분리 시키는 역할을 합니다. 

 

dispose

위젯이 완전히 사라질 때, 최초 한번 실행 됩니다. 

삭제 개념으로 삭제된 위젯을 리소스 자원에서 해제 시킵니다. 

 

아래와 같이 코딩하면 버튼을 누룰 때 마다 어떻게 라이프 사이클이 동작하는지 알 수 있습니다. 

print 출력문을 중점으로 보면,

빨간색 박스가 노출되었을 경우에는 생성자 -> createstate -> initstate -> didchangedepenencies -> build 순으로 동작합니다. 

버튼을 눌러서 빨간색 박스를 없애면 deactivate -> dispose가 동작합니다. 

import 'package:flutter/material.dart';

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool show = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
     body: SizedBox(
       width: double.infinity,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           if(show) MemoryMan(),
           SizedBox(height: 32,),
           ElevatedButton(onPressed: (){
             setState(() {
               show = !show;
             });
           }, child: Text('Button'))
         ],
       ),
     ),
    );
  }
}


class MemoryMan extends StatefulWidget {
  MemoryMan({super.key}){
    print('1. 생성자');
  }

  @override
  State<MemoryMan> createState(){
    print('2. createState');
    return _MemoryManState();
  }
}

class _MemoryManState extends State<MemoryMan> {
  @override
  void initState() {
    print('3. initState');
    super.initState();
  }

  @override
  void didChangeDependencies() {
    print('4. didChangeDependencies');
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    print('5. build');
    return Container(
      color: Colors.red,
      width: 50,
      height: 50,
    );
  }

  @override
  void deactivate() {
    print('6. deactivate');
    super.deactivate();
  }

  @override
  void dispose() {
    print('7. dispose');
    super.dispose();
  }
}