플러터는 어떻게 위젯을 렌더링할까?

How Flutter renders widgets 발표 자료

모든 것은 위젯이다

플러터는 모두 위젯으로 이루어져 있습니다. 아래의 플러터 코드는 어떤 UI를 구성할까요? 한 번 머릿속으로 상상해보시길 바랍니다.

위젯은 불변성을 가진다

플러터의 3가지 트리

Widget

위젯은 속성에 대한 정보를 포함합니다. 예로 들어서 fontSize, text, style 등이 위젯의 속성에 속합니다.

Element

Element는 부모, 자식 관계에 대한 정보를 포함합니다. 그 말은 위젯의 생성과 파괴에 대한 생명주기를 관리합니다.

Render Object

Render Object 위젯의 크기, 레이아웃을 포함합니다. 어떻게 화면에 그릴지에 대한 로직을 가지고 있습니다.

3가지 트리는 어떻게 구성될까?

  1. Element는 Widget에 RenderObject 생성을 요구하며, 위젯은 RenderObject를 생성하며 렌더링을 위한 모든 정보를 넘겨줍니다. 렌더링을 위해선 위젯의 속성이 필요하기 때문입니다.

UI가 변경되는 앱

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

결론

플러터 팀은 1초에 60프레임을 목표로 큰 노력을 기울이고 있습니다. 그리고 그 목표는 성공적으로 이루어지고 있습니다. 그것이 가능했던 이유 중 하나는 위에서 다룬 것처럼 자원을 최대한 재활용하는 것으로 생각합니다

--

--

https://github.com/kimdohun0104

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store