플러터 Stateful Widget은 수시로 보면서 이해해야 익숙해 질거 같아서 한번 더 작성해보려고 한다.
점점 더 딥하게 찾아볼수록 어떻게 렌더링 되고 UI의 상태 체크를 할 수 있는지 알 수 있어서 흥미롭게도 함
플러터에 대해 찾아보면
플러터는 초당 60프레임 속도라고 나온다 => 1초에 60번 그린다는거!!
그렇다면 어떻게 이렇게 빠르게 매번 그릴 수 있는 것일까?
Reload vs Rebuild
저 질문에 답을 하기전에 Reload와 Rebuild의 차이를 알고 있어야한다
Reload는 특정 부분만 바꾼다 -> 자동차의 바퀴만 교체
Rebuild는 전체를 교체함 -> 자동차 부분 고장이어도 자동차 전체 한번 교체!
Text만 바뀌어도 매번 Rebuild가 된다면 리소스가 얼마나 많이 낭비될까
특정 부분만 바뀌었는데도 매번 새로 build가 되어버리고 다시 위치를 전부 조정한다면 1초에 60프레임은 꿈도 꿀 수 없는 속도다!!
Element Tree로 필요 부분만 Reload해보자
Element Tree는 Widget의 타입과 위치가 일치하면 그냥 새로 연결만 해버린다!
이러면 바뀐 부분을 제외하고는 전부 그대로 가져올 수 있어서 시간을 아낄 수 있다!!
위에 그림을 보면 Container widget의 색상이 변했다
개발자가 Hot reload를 해서 수정본을 확인한다
이때 build() 함수가 실행된다!
Widget tree가 다시 rebuild 되게 된다! -> 애는 우리가 작성하는 설계도면이라 생각하자!
Element tree link update 즉 Widget tree와 연결한다
Element tree info 이때 새로 바뀐 부분을 제외하고는 재사용한다!
Render tree 를 이용해서 화면에 Rendering해준다
Render Object re-rendering을 통해 화면 보여주기!
Stateful Widget
Stateful Widget -> 이것도 생성자로 인해 build 메소드가 호출되고 UI 렌더링 된다
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// StatefulWidget이 불릴때마다 반영됨
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
int state = 0;
@override
Widget build(BuildContext context) {
return MatrialApp(
home: Scaffold(
appBar: AppBar(),
body: Column(
mainAxisAlignment: MainAxisAlignment.center;
children: [
Text('counter'),
Text(
'$state',
style: TextStyle(color: Colors.black),
),
floatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
counter++;
}
);
},
),
],
),
),
);
}
}
왜 Stateful Widget은 클래스를 두개를 사용할까?
이건 Stateless Widget과 Stateful Widget이 무엇을 상속받는지 알아야한다
둘 다 Widget을 상속받게 된다!! -> Widget클래스는 immutable이어서 한번 생성되면 state가 안 바뀐다!
Stateful Widget은 state상태에 따라 빌드가 되기 때문에 mutable한 클래스를 추가로 설정해야한다!!
그래서!! State< T extends Stateful Widget >을 상속받는 클래스를 추가해준거!!
이렇게 작성하게 되면 프로그램에서 두 클래스 연결 알려주는거라고 생각하면 편하다
피드백
요새 과제 때문에 많이 못 적었는데 오늘 IT Festival 준비하고 플러터 다시 분석해야겠다
