[Flutter] Stateless Widget vs Stateful Widget

State

• 데이터
• UI(의 변경 가능성)에 영향을 미치는
• App 단위의 변경 or Widget 단위(수준)의 변경 가능성이 있음

---

플러터 트리

Widget tree

• 개발자가 작성한 코드를 기반으로
  플러터가 build 메소드를 호출해서 생성
• 플러터에게 이런 UI를 그려달라고 알려주는 순서도 같은 것
  (MyApp → Scaffold → AppBar → Text)

Element tree

• 위젯 트리와 렌더 트리를 연결
  Widget tree ← Element tree → Render tree
• 위젯 트리의 모든 위젯과 1:1로 연결되는 Element를 가지고 있음
• 위젯트리가 생성되면서 같이 생성
  위젯 트리 요소 생성 → 엘레멘트 생성
  엘레멘트는 트리 위젯 요소와 연결(piont, 링크)되며 해당 위젯의 정보(위치, 타입, 크기, 색 등)를 가지고 있음
• 각 Element 는 렌더 트리의 렌더 객체와 1:1로 연결 됨
• 메모리에 등록되어서 운영되는 플러터의 요소

Render tree

• 직접적으로 화면에 그림을 그림

코드가 수정된 경우,

1) Widget tree가 Rebuild 됨 (Relod x)

• Relode: 구조는 그대로 두고 내부 구성만 갱신
• Rebuild : 새로 구조를 만듦

2) Element tree 는
a. 연결되었던 위젯 트리 요소와 위치나 타입 속성 등이 동일한 위젯 트리 요소로 링크(point) 업데이트 (Rebuild X)
b. 추가, 변경된 코드로 인해 다시 렌더링이 필요한 경우, 해당 정보를 연결된 렌더 객체에 전달

3) Render tree는
엘레멘트 요소가 전달한 정보에 의해 바뀐부분 만을 새로 그림

위젯 코드 수정 → Hot Reload → build method
→ Wiget tree rebuild
→ Elemnt tree link update → Elemnt tree info
→ Render tree → Render object re-redering

• Hot reload : 변경된 요소만 다시 빌드하여 효율을 높임

---

Stateless widget

• State가 변경되지 않는 위젯
• rebuild 해야 새로운 State를 적용할 수 있음
  (build method 호출 → UI 렌더링)

Stateful widget

• 변경된 상태를 반영하는 위젯을 만들 때 사용

  state가 변경되는 경우

  • Child 위젯의 생성자를 통해서 데이터가 전달될 때
  • inernal state가 변할 때

• StatefulWidget 위젯 클래스와
  State 정보를 가진 클래스를 생성하여 연결해야 함

1. class MyApp extends StatefulWidget {}

• StatefulWidget은 Widget 클래스를 상속 함
  → Widget 클래스는 생성되면 state가 변경되지 않음
  난감..상태에 따라 변경된다는 클래스가 상태가 변경되지 않는 속성을 지님..;;;;

so, 상태를 나타내는 클래스를 만들어서 연결함

  
  

2. class MyAppState exteneds State <My App>

• State 클래스는
  generic type 이고 StatefulWiget을 상속
  => MyAppState 은 State 타입이 됨 (State 을 상속했으니까)
  State의 generic type 을 MyApp 으로 지정하면
  이 State 클래스는 MyApp 타입만을 가지게 됨
  ∴ MyAppState는 MyApp타입만을 가짐

상태 클래스에 어떤 클래스(MyApp)의 상태인지는 지정(연결) 했지만 상태가 변경된 건 그 클래스(MyApp)에 어찌 알려주나?

so, 클래스 생성시 상태를 확인하는 메소드를 만듦


3. MyApp 클래스의 createState 메소드

class MyApp extends StatefulWidget { 
    @override 
    State<StatefulWidget> createState (){
    return MyAppState();
    }
}

• createState 메소드는 satetful 위젯이 생성될 때 마다 호출 됨
• MyAppState를 호출
  
  
  

4. MyAppState 클래스의 setState 메소드

• setState ( )가 하는 일
  1) 매개변수로 전달된 함수 호출 (상태 변경)
  2) 빌드 메소드 호출

  

Stateful Wiget 실행 프로세스

MyApp Stateful wiget 생성
→ MyApp Stateful element 생성
(메모리 상에 독립된 개체, MyAppState object에 대한 정보도 가지고 있음

→ _createState method 호출
→ MyAppState object 생성 (MyApp Stateful wiget 과 간접적으로 연결)

→ setState method 호출 (상태변경 발생)
→ State object rebuild
→ MyApp Stateful wiget rebuild
→ MyAppState object 새로운 상태 저장 → 새로 생성된 MyApp Stateful wiget 로 연결

Stateless 위젯 vs Stateful 위젯

• 공통점
  - build 메소드를 통해 → 변경된 UI 렌더링
  
  
• 차이점
  • stateless 위젯은
    build 메소드에서 생성된 객체를 바로 반환
  • stateful 위젯은
    createState 메소드에서 생성한 객체를 반환함

stateless 위젯 :
build 메소드 → UI 렌더링


stateful 위젯
State → build 메소드 → UI 렌더링