Layout Model

compose는 상태를 UI로 변환 해준다. 그럼 어떤 원리로 변환을 해주는 걸까?

크게 3가지로 나누는데

Composition(구성) - Layout - Drawing

이렇게 3단계로 구성이 된다.

Composition(구성)

구성에서는 컴포저블 함수를 실행 시킨다. 그리고나서 UI를 내보내 UI 트리를 만든다

@Composable
fun SearchResult(...) {
	Row(...) {
		Image(...)
		Column(...) {
			Text(...)
			Text(...)
		}
	}
}

예를 들어 위 코드 SearchResult 컴포저블 실행 하면

• SearchResult

같은 Tree구조가 나온다.

컴포저블에 로직과 제어 플로를 포함해 다양한 상태의 여러 가지 트리를 만들수가 있다.

Layout

레이아웃 단계에서는 트리를 작동하고 UI의 각 부분을 측정하여 화면에 배치 한다.

각 노드가 너비와 높이를 결정하고 x,y좌표를 알아낸다.

Drawing

UI 트리가 작동하고 모든 요소를 렌더링 한다.