flutter - stateful widget

[state란?]

-> UI가 변경되도록 영향을 미치는 데이터이다.

 

-> 데이터는 지속적으로 변할 수 있다.

 

-> 위젯 수준에서의 데이터는 라디오 버튼이 check가 되어있는지 텍스트 창에 입력이 되어있는지.. 같은 의미이다.

 

 

 

 

 

 

[플러터의 트리]

-> Widget tree

-> Element tree

-> Render tree

-> 위젯 트리는 우리가 코드상에서 얼마든지 제어할 수 있다.

-> 하지만 Element tree, Render tree는 플러터가 내부적으로 제어한다.

-> Element tree와 Render tree는 우리가 만든  Widget tree에 근거해서 생성된다.

 

 

 

 

 

 

[Widget tree]

-> 우리가 작성한 코드에 근거해서 플러터가 빌드 메서드를 호출해서 생성하는 것이다.

-> 그러나 이 위젯 트리는 하나의 구성일 뿐 직접적으로 스크린에 그려지는 것은 아니다.

-> 위젯 트리의 역할은 하나의 설계도로, 플러터에게 스크린에 이런 순서와 모양으로 UI를 그려달라고 알려주는 것이다.

-> Widget tree 빌드 메서드가 호출 될때마다 새롭게 rebuild 된다. 위젯 트리 자체가 stateless 위젯 처럼 한번 생성 되면 바뀌지 않기에 바꾸려면 아예 새로 만들어야 한다는 의미이다.

 

 

[Element tree]

-> 사실 가장 중요한 트리이다.

-> Element tree는 중간에서 Widget tree 와 Render tree 를 연결하고 있다.

-> Element tree는 flutter 가 자동으로 우리가 만든 위젯 트리에 근거해서 생성을 해주는 요소이다.

-> Widget tree에 있는 모든 위젯 하나하나가 1대1 맞대응 형식으로 Element tree에 링크가 되어 있다.

-> 플러터는 Widget tree가 생성될 때마다 Element tree도 함께 생성한다.

-> Element tree도 따라서 위젯들의 정보를 담고있는 하나의 객체라고 할 수 있다.

 

-> Widget tree가 rebuild 되었을때 Element tree도 함께 rebuild되는 것이 아니라 새롭게 생성된 위젯들의 타입과 위치가 일치한다면 그대로 링크만 업데이트 하는 방법을 사용한다.

-> 그리고 Element tree는 타입과 위치는 같지만 새로운 코드의 추가로 다시 랜더링이 필요한 위젯에 한해서 Render tree에게 정보를 전달해 주고 Render tree는 이를 근거로 기존 위젯의 Render 객체에서 바뀐 부분만을 다시 그려주게 된다.

 

 

[Render tree]

-> 직접적으로 스크린에 그림을 그려준다.

-> Element tree는 중간에서 이 Render tree가 실제적으로 랜더링하기 위해서 가지고 있는 랜더 객체와 1대1 맞대응 형식으로 연결 되어 있다.

-> 최종적으로 우리가 눈으로 보는 스크린 상의 모든 요소들은 랜더 트리의 작업 결과이다.

 

 

 

 

 

[stateless widget]

-> state 가 변하지 않는 위젯

-> stateless widget이 가지고 있는 데이터는 변하지 않는다는 뜻이다.

-> stateless widget 내에서 지정된 레이아웃이나 텍스트 컬러정보 같은 것들은 변하지 않는다.

 

-> stateless widget는 새로운 state를 적용하려면 rebuild 하는 방법밖에 없다.

 

 

 

 

 

 

 

 

 

 

 

 

[stateful widget]

-> stateless widget과의 결정적 차이점은 stateful widget 내부에 State라는 또다른 클래스를 가지고 있다는 점이다.

-> stateful widget에서 빌드 메서드는 state 클래스가 가지고 있다.

-> stateful widget에 rebuild를 초래하는 것은 결과적으로 state 클래스이고 이를 통해서 다시 스크린을 랜더링 한다.

-> stateful widget이 rebuild 되는 경우는 stateless widget 처럼 child 위젯의 생성자를 통해서 데이터가 전달 될 때, Internal state가 변할때 이다.

 

 

 

 

 

 

 

 

---------------------------------------------------------------------------------------------

 

 

 

[왜 stateful 위젯은 두개의 클래스로 이루어져 있을까?]

-> 위젯이 상속받고 있는 stateful 위젯은 Widget 클래스를 상속받고 있다. 하지만 이 Widget 클래스는 정적이기 때문에  stateful 위젯을 상속받은 위젯은 한번 생성되고 state가 변하지 않는다.

 

 

-> 하지만 stateful 위젯은 반드시 state의 변화를 반영해야 하므로, 이 문제를 해결하기 위해서 클래스를 두개로 나눈 것

->위의 클래슨는 정적인 특징을 유지하고 아래의 클래스는 동적인 속성을 대신하게 만든 것

 

 

 

[setState Method]

-> 1. 매개변수로 전달된 함수를 호출 하는 것

-> 2. 빌드 메서드를 호출 하는 것

-> setState Method는 state가 변한 위젯들을 표시해 준다.

 

 

 

 

 

[코드 예시]

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

// stateless 한 Widget 을 상속 받은 StatefulWidget은 Imutable 한 특징을 유지
class MyApp extends StatefulWidget {

  // createState() 메서드는 반드시 State타입의 객체를 리턴해야 한다.
  // 결국 <StatefulWidget> 타입만이 올 수 있는 객체여야 한다.
  // 이 객체는 아래의 MyAppState에 근거해서 만들어진 것이다.
  @override
  State<StatefulWidget> createState() { 
  // createState() 메서드는 StatefulWidget 위젯이 생성될때마다 호출되는 메서드이다.
    // TODO: implement createState
    return MyAppState();
  }
  //StatelessWidget은 build 메서드에서 생성한 객체를 바로 반환하지만
  //StatefulWidget은 이 createState() 메서드에서 생성한 객체를 반환한다는 것이 
  //중요한 차이점 중 하나이다.
}

// 대신 MyAppState 클래스가 mutable한 속성을 대신하게 만들어서 이렇게 클래스를 
//두개로 나눈 것이다.
class MyAppState extends State<MyApp>{

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

        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {

  MyHomePage({Key? key, required this.title}) : super(key: key);



  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  int counter = 0;
  void _incrementCounter() {
    setState(() {


    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,

              children: [
                FloatingActionButton(
                  onPressed: (){
                    //setState 메서드는 counter 변수의 숫자가 증가함에 따라서 
                    //counter 변수를 사용하는 위젯들을 표시해준다.
                    //counter의 증가로 state가 변했고 이 변화를 다시 
                    //rebuild 해줘야 하기 때문이다.
                    setState(() {
                      counter++;
                      print('$counter');
                    });

                  },
                  tooltip: 'Increment',
                  child: Icon(Icons.add),
                ),

                SizedBox(
                  width: 20,
                ),

                FloatingActionButton(
                  onPressed: (){
                    setState(() {
                      counter--;
                      print('$counter');
                    });

                  },
                  tooltip: 'Increment',
                  child: Icon(Icons.remove),
                ),
              ],
            ),

          ],
        ),
      ),

    );
  }
}

 

 

[결과 화면]

 

 

 

 

[해당 내용 및 데이터는 유튜버 코딩 쉐프님의 수업 영상에서 참고하였습니다.]