Stateful, Stateless Widget LifeCycle

Widget 

widget은 모두 불변의 법칙을 갖고 있다.

위젯의 색 등 그 값을 변경해야 할때는 기존 위젯을 삭제해버리고 완전히 새로운 위젯으로 대체한다!

 

StatelessWidget 라이프 사이클

class Test extends StatelessWidget {
  const Test({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

StatelessWidget은 Constructor로 생성이 되고, 생성이 되자마자 build함수가 실행된다.

변경이 필요하면 새로운 위젯을 만들어버리고,

하나의 StatelessWidget은 라이프사이클동안 단 한번만 build함수를 실행한다.

 

StatefulWidget 라이프 사이클

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

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }

  @override
  void dispose() {
    super.dispose();
  }
}

StatefulWidget은 두개의 클래스로 구성된다. (StatefulWidget, State클래스)

StatefulWidget에서는 상태를 관리하기 위해 build함수가 여러번 실행되어야하지만 StatefulWidget은 widget이므로 불변의 법칙을 지켜야 한다.

따라서 불변의 법칙을 따르는 StatefulWidget클래스, 그럴 필요가 없는 State클래스 두가지를 사용해서 StatefulWidget을 구성하는 것이다.

Constructor로 Widget이 실행되면 createState가 실행되어 State 클래스가 생성된다.

State에서는 initState를 통해 초기화를 진행하고(딱 한번 실행됨), didChangeDependency를 통해 dirty한 상태가 된다.

이렇게 state가 dirty한 상태가 되면 build함수가 실행된다.

build함수가 실행되면 위젯을 화면에 그려주고 다시 clean한 상태로 돌아간다.

그리고나서는 didUpdataWidget, setState 등의 함수가 실행될 가능성이 있지만, 만약 그렇지 않고 이 위젯이 삭제된다는 시그널이 있다면 deactivate, dispose의 순서로 실행되며 위젯이 삭제된다.

위젯 파라미터에 변경사항이 있을 때(ex, 색상이 변경), StatefulWidget은 불변의 법칙을 지키기 위해 새롭게 생성된다.

즉, Constructor가 다시 실행된다.

하지만 이 경우 createState는 다시 실행되지 않는다. 단지 새롭게 생성된 StatefulWidget이 이전에 생성되었던 State를 찾아서 합쳐진다. (원래 있던 State 재활용)

그러면 새롭게 만들어진 위젯이 clean한 state에 붙었으므로 didUpdateWidget이 실행되고, 새롭게 실행된 constructor때문에 값들이 바뀌어서 State는 dirty한 상태가 된다.

그럼 이 변경된 값들을 기반으로 다시 build가 실행되고, state는 clean한 상태가 된다.

모든 작업은 State가 Clean한 상태에서 이루어진다는 것에 주의.

StatefulWidget을 생성하면 State클래스에서 특별하게 실행할 수 있는 함수가 있는데, 이것이 바로 setState이다.

setState 역시 State가 clean한 상태에서만 실행될 수 있고, State내부에서 실행되며 build가 계속해서 재실행될 수 있게 해준다.

 

 

 

* 자료 출처 : 코드팩토리 (https://www.inflearn.com/users/@codefactory)