[Flutter] Tree 구조와 Widget

---

<Flutter의 Tree 구조>

플러터에는 화면을 구성하는 3개의 트리 구조가 있습니다. 

위젯 트리(Widget Tree)는 코드를 작성하여 화면에 그려지는 객체의 구조이고, 플러터 프레임워크가 화면을 만들 때 엘리먼트 트리(Element Tree), 렌더 트리(Render Tree)가 만들어집니다. 퍼포먼스 최적화와 화면 렌더링 속도를 위해 엘리멘트 트리와 렌더 트리가 별도로 존재합니다. 플러터는 네이티브 앱 수준의 성능을 목표로 하기 때문에 최적의 알고리즘으로 화면에 변화가 있는 부분만 다시 렌더링해서 반영할 수 있도록 설계되어 있습니다.

 

1) 위젯 트리(Widget Tree)

위젯 자체가 실제 화면에 출력되는 대상은 아니고, 프레임워크에서 뷰 설명을 보고 위젯트리를 참조해 실제 화면에 출력할 객체들을 별도 트리 구조로 만듭니다. (ex) Text 위젯을 사용하면 하위에 RichText 위젯이 자동으로 생성.

위젯의 상세 설명에 renderObject 정보가 있을수도 없을수도 있는데, 이 renderObject 정보를 가진 위젯이 실제 화면에 그릴 정보를 가진 위젯입니다. (ex) Text 위젯은 renderObject 정보가 없고, 하위의 RichText 위젯이 renderObject 정보를 가짐.

 

2) 엘리먼트 트리(Element Tree)

위에서 설명한 프레임워크가 위젯트리를 참조해 만드는 트리를 기반으로 만들어지는게 엘리멘트 트리입니다.

엘리멘트 트리는 ComponentElement, RenderObjectElement 객체로 구성됩니다.

• ComponentElement 객체 : 화면에 출력할 정보를 가지지 않고, 다른 객체를 포함하는 역할을 합니다. (ex) Text 위젯
• RenderObjectElement 객체 : 실제 화면에 출력할 정보를 가지고 있습니다. (ex) RichText 위젯

 

3) 렌더 트리(Render Tree)

엘리멘트 트리를 바탕으로 실제 화면을 출력하는 렌더 트리가 만들어지는데, 실제 화면에 출력될 정보만 가진 RenderObjectElement에 해당하는 객체로만 구성됩니다. (ex) RenderDecorateBox, RenderImage, RenderFlex

---

플러터의 렌더링 과정은 다음 포스팅에서 살펴볼 예정이니, 위젯이 무엇인지에 대해 먼저 알아보겠습니다.

 

<위젯(Widget)>

: Flutter 앱 UI의 기본 단위이며, 독립적으로 실행되는 작은 프로그램입니다. 위젯은 Composition을 베이스로 계층 구조로 되어 있는데, 각각의 위젯은 부모의 컨텍스트를 전달받을 수 있습니다. 이런 계층 구조는 루트 위젯(MaterialApp 또는 CupertinoApp)까지 전달됩니다. 별도의 application 오브젝트가 없는 대신에 최상위 위젯이 그 역할을 대신합니다.

 

* Composition : 위젯을 구성하는 기능 하나 하나의 단일 목적 위젯. 

 

위의 코드 예시를 보면 MaterialApp 클래스 > Scaffold 클래스 > Center 클래스 > Builder 클래스 > Column 클래스 > ElevatedButton 클래스 > Text 클래스 부모자식 구조를 이루고 있습니다. 

 

사용자 입력, 반응 등의 이벤트가 발생하면 플러터는 그에 대한 응답으로 계층 구조에 있는 위젯을 다른 위젯으로 교체하여 UI를 업데이트 합니다. 이런 UI 자체 구현에 대한 이점은 다음과 같습니다.

• 무한 확장성 제공. 개발자가 원하는 임의의 위젯을 만들 수 있습니다.
• 플러터가 화면을 한 번에 그려서, 플랫폼 코드와 플러터 코드를 오가면서 발생하는 병목 현상을 방지할 수 있습니다.
• 운영체제의 종속성에서 벗어나, 여러 운영체제에서 똑같이 보이게 할 수 있습니다.

---

<위젯(Widget)의 상태>

위젯의 상태에는 두 가지가 있습니다.

1) Stateless Widget : 시간이 지나도 요소가 변경되지 않을 때.

2) Stateful Widget : 유저 상호작용이나 다른 요소들로 위젯이 변경될 때. Stateless Widget에 비해 비용이 비싸고, 구조 설계가 복잡해집니다.

---

<위젯의 라이프 사이클>

: 위젯이 화면에 그려지고 사라질 때까지의 생명 주기입니다.

• Constructor : 위젯은 생성되면 가장 먼저 생성자를 호출합니다. 위젯이 Stateful 위젯이라면 내부적으로 CreateState 함수(상태 위젯을 관리)를 호출합니다.
• initState() : 위젯의 상태를 초기화하기 위한 함수입니다. InitState()가 완료되어야 위젯이 그려집니다.
• setState() : Stateful 위젯이 가진 함수입니다. 이 함수를 호출하면 위젯은 다시 build 함수를 호출해서 화면에 그려집니다.
• build() : 구현한 UI 위젯들이 화면에 출력될 수 있도록 리턴해줍니다.
• dispose() : 위젯이 속한 페이지를 나가거나, 사라져야할 때 dispose 함수를 호출해서 화면에서 사라집니다. 메모리 할당 해제 작업을 해줍니다.

---

다음 포스팅에서 이어서 렌더링 과정을 더 자세히 알아보겠습니다.