[안드로이드스튜디오_문화][Compose Rendering]

기말 지하기포·2024년 1월 13일

AndroidStudio_Culture_Helper

목록 보기

41/72

#JetpackCompose Rendering Phase Android Developer 공식문서
=>https://developer.android.com/jetpack/compose/phases?hl=ko&_gl=1*1jnhegl*_up*MQ..*_ga*MTA1MjAwOTk1MC4xNzA3OTEwNDAz*_ga_6HH9YJMN9M*MTcwNzkxMDQwMi4xLjAuMTcwNzkxMDQwMi4wLjAuMA..

-Rendering 단계는 [1.Composition 단계] , [2.Layout 단계] , [3. Drawing 단계] 이렇게 세가지의 단계로 이루어져 있다. 또한 각각의 단계를 거치면서 최소한의 작업만을 실행하고자 하는데 , 이러한 최소한의 작업만으로 UI를 그릴 수 있는 이유는 JetpackCompose가 컴포저블의 상태를 추적해서 읽기 때문이다.

-JetpackCompose는 데이터를 UI로 변환하는 역할을 한다. 이 과정에서 컴포지션 -> 레이아웃 -> 드로잉 이 세가지의 단계를 거쳐서 실제 UI로 변환된다.(단방향 데이터 흐름이라고 생각해도 된다.)

-전체적인 과정을 나타낸 그림이다.

1) Composition 단계

-화면에 무엇을 보여줄 것인지를 결정한다.

-UI코드를 실제 메모리 상에서 트리 형태로 변환한다. 컴포저블 함수 하나 하나가 UI트리 상의 노드 하나 하나에 맵핑이 된다. 이 노드를 레이아웃 노드라고 부르고 이 레이아웃 노드에 '자식 컴포저블' '코드 로직' '상태'등이 포함되어 있다.

-또한 modifier에 대한 값을 가지고 있는 modifier 설정 값 갯수만큼 레퍼노드(모디파이어 노드라고 불리기도 한다.)를 생성해서 레이아웃 노드를 감싼다. 이렇게 되면 체인되었다고 표현하며 여러 래퍼 노드들이 연결된 상태로 레이아웃 노드를 감싸기 때문이다.(자세한 건 Drawing 단계에 나와있음.)

-이러한 상태, 로직 등의 정보를 가지고 레이아웃 노드가 모여있는 UI 트리를 만든 후에 레이아웃 단계로 넘어간다.

2) Layout 단계

-컴포저블을 화면의 어디에 그릴지를 것인지를 결정한다.

-레이아웃 단계에서는 트리를 탐색하면서 화면의 어느 위치에 각각의 래핑된 레이아웃 노드를 배치할지 결정한다. 레이아웃 단계는 하향식으로 이루어지며 , [2-1. 자식측정]이 다 이루어지면 [2-2. 본인측정]을 시작하고 [2-3. 2-1, 2-2 단계를 기반으로 자식배치]를 시작한다. 단, 모든 wrapping된 LayoutNode는 단 한번만 방문해서 소요시간을 최소화한다. (현재 노드가 자식을 가지고 있지 않다면 잎 노드로 간주되어서 바로 본인측정 단계로 간다. 잎 노드는 주변의 다른 노드들에 영향을 받지 않고 독립적으로 크기와 위치가 결정되므로 이러한 잎 노드들은 자식이 있는 다른 노드들과 비교했을 때 상대적으로 더 빠르게 처리 될 수 있다.)