Flutter Design Patterns and Best Practices Study #1

김민진·2024년 12월 24일

Flutter Design Patterns and Best Practices flutter

개발공부

목록 보기

10/11

단톡방에서 Flutter Design Patterns and Best Practices 책이 좋다는 이야기를 듣고 구매를 해보았다.

책이 단점이 번역본이 없는 영어로 되어져 있다.

영어 독해 능력도 키우고 좋다..

Widget Tree

Root ( no parent node )

MaterialApp extends StatefulWidget

↓
Node
Text extends StatelessWidget

↓

left node(no children nodes)
RichText extends MultiChildRenderObjectWidget

위젯 구조는 보통 이러한 구조를 그린다고 한다.

내 블로그에 있는 diff 를 참고해보면

Widget
Element
RenderObject

의 구조를 띄인다.

해당 구조가 의미하는 바는 다시한번 설명하자면
Widget은 설계도
Element는 설계도의 생명주기
RenderObject는 설계도를 토대로 그리는 역할

을 담당한다.

Widget들은 항상 RenderObjectWidget class 를 상속받는다.

그리고 항상 build 함수를 실행시킨다.

	Stateless Widget and Stateful Widget	RenderObjectWidget
Function	Composing Widget	Rendering render objects
Methods	build	createRenderObject,updateRenderObject
Extended by developer	often	Rarely
Examples	Container,Text	SizedBox,Column

좌측 부분은 build 에 의해 생성된다.
우측 부분은 create,update 에 의해 새롭게 갱신 혹은 생성된다.

우측 부분부터 보자면
좌측의 build에 의해 우측부분들에 해당 위젯이 새롭게 그려져야할지 아닌지를 판단하여 rendering하게 된다.

widget -> element -> renderObject
의 순서로 전달이 된다.

해당 위젯을 새롭게 갱신해야 하는지의 필요성은 key나 타입을 통해서 간접적으로? 비교하게 된다

해당 방법은 diff 을 이용한다.

render objects are mutable

랜더링 객체는 변경이 가능하다.

yet the widgets themselves that create those render objects are immutable

하지만 이러한 객체를 만드는건 좋지 않다.

아래의 내용을 참고해보자

@immutable
abstract class Widget{
Element createElement();
}

Widget은 widget tree에 추가될때마다 createElement를 호출하게 된다.

이 Element는 무엇일까?

abstract class Element{
Widget? _widget;
Element(Widget widget):_widget = widget{...}
}

Element는 첫번째 필드로 private Widget필드를 가지게 된다.
해당 _widget을 보면 final타입이 아니다 즉 widget 은 재 할당이 가능하다.

widget의 재 할당은 프레임 워크가 update 함수를 호출할때 발생한다.

update 의 내용을 보자

abstract class Element{
void update(covariant Widget newWidget){
_widget = newWidget;
	}
}

private Widget 은 newWidget으로 재 할당 된다.
oldWidget은 할당 되면서 버려지게 된다.

새로운 위잿으로 재 할당되기 전에는 canUpdate 함수가 동작하게 된다.

abstract class Widget {
	static bool canUpdate(Widget oldWidget, Widget newWidget) {
    		return oldWidget.runtimeType == newWidget.runtimeType && oldWidget.key == newWidget.key;
            }
       }

이게 바로 diff에서 설명했던 내용이다!

이책은 대단한게 첫 페이지 부터 해당 내용에대한 접근 및 설명을 진행하고 있다.

해당 내용을 간단하게 표로 정리해 보자.

Widget의 build메서드가 처음이라면 Element를 생성한다.

만약 처음이 아니라면 canUpdate위젯을 통해서 그릴지 아닐지를 구분한다.

해당 스텝의 마지막으로

widget element renderObject 의 구조를 표로 한번 보도록 하자.

	Widget	Element	RenderObject
Mutable?	No	Yes	Yes
Cheap to create?	Yes	No	No
Created on every build?	Yes	No	No
Used by devs	Always	Almost never	Very rarely
Relationships	Every widget has an Element, but not every widget has a RenderObject	Implements BuildContext and has access both to the widget, and the RenderObjhect(if it exists)	Only created by implemenmters of RenderObjectWidget