Flutter의 랜더링 원리

카테고리 없음

신승호. 2023. 1. 26. 15:59

Flutter는 모두 위젯으로 이루어져 있다.

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: Center(

child: Text("Hello"),

);

}

위 flutter코드를 실행시키면

위의 화면이 나온다. UI의 결과를 보니 Center의 자식으로 Text라는 위젯이 존재하기 때문에 가운데에 'Hello'를 출력한 것으로 보인다.

여기서 알 수 있듯이 flutter의 위젯은 부모, 자식 관계를 맺고 있다. Columm, Row와 같은 위젯은 여러 개의 자식을 가질 수 있다. 또 자식을 포함하지 않는 위젯도 존재한다.

하지만 UI는 가변적이다. 유저의 수많은 상호작용을 통해 데이터가 변경될 것이고, UI는 반드시 업데이트되어야 한다.

플러터가 UI를 업데이트하는 방법은 위젯은 불변하지만, 위젯 트리는 변경 가능하기 때문에 위젯 트리에서 일부를 들어내고 , 다른 위젯 구성으로 교체할 수 있다.

flutter는 3가지의 트리로 구성되어있다.

Widget

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

Element

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

만약 Element가 없다면 상위 혹은 하위 위젯에 대한 정보를 얻을 수 없고, 그로 인해서 위젯 트리를 변경해 UI를 업데이트하는 것이 힘들다.

Render Object

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

우리가 흔히 볼 수 있는 위젯:

●레이아웃: Row, Column, Scaffold, stack ●구조: Button, Toast, MenuDrawer

●스타일: TextStyle, Color ●애니메이션: FadeInPhoto, Transform

●위치와 정렬: Center, Padding

Textd위젯만 존재하는 앱을 예시로 들면 플러터는 내부적으로 아래와 같이 동작한다.

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