플러터 Stateful 위젯의 생명주기 ??

비전문가인 내가 플러터를 배우는 모든 순간이 위기이다. 오늘의 위기는 Stateful 과 Stateless 위젯의 차이점의 대한 이해이다. 

코딩책을 읽다보면 정말 고이고 고인 분들이 코딩의 세계를 만들었다는게 느껴진다. 

 

어플을 만들기 위해서는 화면을 꾸며야 한다. 요즘 대부분의 어플들은 화면에 정적인 정보보다는 동적인 정보도 같이 제공해주는 경우가 많다. 예를들어 날씨어플, 실시간으로 버스 동선, 비트코인의 쉼 없이 움직이는 그래프 등등  

이러한 동적인 정보를 화면에 구성하기 위해서는 Stateful 위젯을 사용해야 한다. 

 

Stateful 위젯에 대해서 알아보는 중  "생명주기" 라는 단어가 날 더 혼란스럽게 했다. 

내가 이해한 바로는   Stateful 위젯의 생명주기 == 정해진 실행순서 이다. 

 

곰곰히 생각해보니 코딩의 궁극적인 목표는  빠른 속도로 안정된 프로그램의 실행이다. 실시간으로 정보를 주고 받아야 하는 어플들은 아무래도 과부하가 걸리기 쉽다. 그래서 우리 코딩의 천재분들이 미리 이러한 문제를 해결하기 위해  빠른속도로 안정화된 코드를 만들어 주셨다. 

 

아래는 그 안정화시키는 코드들이다. 

 

Stateful  위젯을 사용시 

1. createState()  -> 위젯을 상태를 생성하는 함수

 

2. mounted == true -> createSate 함수 이후에 화면을 생성할 수 있다라는 함수 -> 많이 쓰이지는 않지만 안정성을 위해 작성을 요함 

 

3. initState(){

super. initSate();

_getJsonData(); }

-> 위젯을 초기화 할 때 한 번만 호출, 주로 데이터 목록을 만들거나,  처음 필요한 데이터를 주고 받을 때 쓰인다 --> 계산기 같은 데이터가 필요하지 않을 때는 사용하지 않는다. 

 

4. didChangeDependencies()함수 -> initState 함수가 호출된 후에 이어서 바로 호출되는 함수이다. 실시간으로 데이터를 의존해야 한다면 무조건 사용해야 한다. 

 

5. build() -> 화면을 만드는 함수 

 

6. didUpdateWidget() ->부모 위젯이나 데이터가 변경 될 때 사용하는 함수 

 

7. setState() -> 함수를 이용하면 데이터가 변경되었다는 것을 알려주고 변경된 데이터를 이용해 화면의 UI 변경할 수 있도록 합니다. 제일 많이 호출 하는 함수이다. 

 

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

 

9. dispose( )-> 위젯의 상태관리를 아예 중지하는 함수 

 

10.mounted == false -> 객체의 소멸 

 

 

 

 

아래는 계산기 어플 코드이다. 

위에 배운 위젯의 정해진 순서는 

 

void main() => runApp(Myapp()); 

먼저 runApp가 실행이 되고 

 

class Myapp extends StatelessWidget {
  const Myapp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(

 

Myapp의 화면 위젯을 만든다.

 

 

class Calculator extends StatefulWidget {
  const Calculator({Key? key}) : super(key: key);

  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State {
  Widget calcbutton(String btntxt, Color btncolor, Color txtcolor) {
    return Container(

 

Myapp화면 위젯 안에 Calulator Stateful 위젯을 만든다.

Stateful의 원활한 진행을 위해상속받는  _CalulatorState 위젯을 createState 함수로 호출하고 화면을 구성한다. 

 

 

 

 

후아 코딩 어렵다