Stateful

그동안 Stateless에 대해 알아 봤다면,
이번엔 동적인 앱을 만들 때 필요한 Stateful에 대해 알아 보겠습니다.

---

State

• 위젯이 빌드될 때 동기적으로 읽을수 있는 정보, 위젯의 생명주기가 끝나기 전까지 변경될 수 있는 정보

• init ---< 변결될 수 있는 정보 > --- destroy

• UI가 변경되도록 영향을 미치는 데이터

  • 체크박스의 체크가 되는 행위, 서버로 부터 데이터를 불러오는 행위

• Stateful : 동적인 화면을 만들기 위한 것

• Stateless : 정적인 화면을 구성하기 위한 것

플러터 프레임워크 내부 트리구조

• Widget tree

  • text, container 등 사용자가 생성
  • 정보를 Element tree 전달

• Element tree

  • 중간 다리 역할
  • 생명주기에 영향이 끼치지 않게 render tree에 넘겨주는 것

• Render tree

  • 직접 생명주기 관리

• Hot 리로딩의 원리

  • 리로딩은 자동차 수리

  • 리빌딩은 자동차 구매

  • 위젯의 정보가 바뀌어 다시 리빌드하게 된다면
    메모리 차원에서 최악의 퍼포먼스
    

  • 위젯 트리만 바뀌게 된다면 화면 구현하는 render tree 재 생성할 필요는 X

  • Element tree와 Render tree는 가만히 있고, Widget tree 계속 바뀐다.

  • Build 메소드(재실행)를 통하여 Widget tree만 리빌드하여 변경된 내용을 바로 확인이 가능한 것!

• Statefull은
  State라는 클래스를 두어 setState()메소드를 통해
  위젯의 리빌드 시작

• Stateless : extends StatelessWidget, 추상클래스를 상속 받고 있어 반드시, build 메서드를 구현해야함

dart 언어의 상속 특징

• 모든 클래스는 최상위 클래스인 object 클래스를 상속받고 있다

• 다중 상속을 지원하지 않는다 (단,mixin 키워드 사용해서 사용가능)

• 상속에 제한을 두진 않는다.

• ※ 다중 상속 불가능 이유(자바와 비슷)💥💥
  부모클래스에 같은 이름을 가진 메소드가 있을 때
  어떤 부모의 메소드를 오버라이딩 해야할지 모르기 때문이다.

• 추상메소드

  • 반드시 ovreride 해야하는 메소드

• 추상클래스

  • 1개 이상의 추상메소를 지니고 있거나 abstract 키워드가 작성된 클래스

• 인터페이스 => 추상 클래스 문법에다가 implements 만 붙이면 됨

  • 일단, 무조건 모든 메소드를 오버라이딩 해야함.
  • 추상메소드를 무조건 오버라이딩 해야하는데
    인터페이스는 일반메소드도 오버라이딩 해야함.

숫자 증가 버튼 만들기

• Stateful 구현 핵심 setState((){})로 State를 저장해줘야 함!!!!!

• 람다식이란?

  실행코드가 한 단락 =>
  int test1(){
  return 10;
  }
  int test1() => 10;
  이런식으로 줄여서 쓰는 것

• 코드

class _Ex01ButtonState extends State<Ex01Button> {
  int num1 = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     body: Center(
       child: Column(
         children: [
           Text('$num1',style: TextStyle(fontSize: 50),),
           ElevatedButton(onPressed: (){
             setState(() {
               num1++;
             });
           }, child: Text('증가',style: TextStyle(fontSize: 20),))
         ],
       ),
     ),
    );
  }
}

• 버튼 위젯 열어서 클릭했을 때, (){} 익명함수 선언 후
  내부에서 setState((){num1++;})