[Compose] Rendering

 

Compose는 크게 보자면 Data를 UI로 변환하는 과정인데, 아래의 과정들을 거칩니다 

Composition : what  (무엇을 그릴지)

layout : where (UI를 어디에 배치할지)

Drawing: How (어떻게 UI를 그릴지)

 

 

Composition

code를 UI Tree화 시킵니다 즉, 데이터와 UI 요소 간의 관계가 정의됩니다



 

Layout

아래의 과정으로 UI 트리를 탐색을 하면서, 각 레이아웃을 측정하고 배치됩니다

1. 하위 요소 측정: 노드가 하위 요소(있는 경우)를 측정
2. 자체 크기 결정: 이러한 측정치를 기반으로 노드가 자체 크기를 결정
3. 하위 요소 배치: 각 하위 노드는 노드의 자체 위치를 기준으로 배치

이 때 , 모든 노드는 단 한번씩만 방문하기 때문에 Compose 런타임은 모든 노드를 측정하고 배치하는 데 UI 트리를 한 번만 통과하면 되므로 성능이 향상됩니다! 

 

이 단계를 거치면 할당된 높이, 너비, 그리고 그려야하는 x,y 좌표를 알게됩니다

 

 

Draw

UI Tree를 위에서 아래로 한번씩만 방문하면서 그리게 됩니다