이 글은 JetpackCompose 공식문서 - 단계를 읽어보면서 정리한 글 입니다.
대부분의 UI키트와 마찬가지로 Compose도 고유한 단계를 통해 프레임을 랜더링 합니다. Compose는
Composition,레이아웃,그리기로 구성됩니다.
Compose가 화면을 그릴 땐 3가지 단계를 통해서 그립니다. 이번 글에서는 3가지 단계를 알아보고 어떻게 하면 최적화된 Compose를 만들 수 있는지 알아보도록 하겠습니다😌.
Compose의 3가지 단계
Compose에는 세 가지 단계가 있습니다.
1. 컴포지션(Composition) - Composable 함수를 실행하고 UI 설명을 만듭니다.
2. 레이아웃(Layout) - 이 단계에서는 측정과 배치를 합니다. 이 단계에서는 레이아웃 트리에 있는 모든 하위요소를 2D 좌표로 측정하고 배치합니다.
3. 그리기(Drawing) - 기기 화면인 캔버스에 UI요소를 그립니다.
이 세 가지 단계를 모두 거치고 UI가 그려진다고 가정할 수 있지만 Compose에서는 성능을 위해 필요한 UI만 업데이트 합니다.
단계적 상태 읽기
각각의 단계들(Composition, 레이아웃, 그리기)은 상태를 추적합니다. 이를 통해 상태가 변경되었을 때 특정 단계에서만 작업을 할 수 있게 됩니다.
상태 인스턴스가 만들어지고 저장되는 경우에는 단계와 거의 관계가 없으며 상태 값을 읽는 시점과 위치만 중요합니다.
1단계 - 컴포지션
@Composable함수나 람다식의 상태 읽기는 잠재적으로 이후 단계에 영향을 미칩니다. 상태값이 변경되면 이 상태값을 읽는 모든 Composable함수의 Recomposition을 예약합니다.
2단계 - 레이아웃
레이아웃에서의 상태 읽기는 레이아웃 단계와 그리기 단계에 영향을 미칩니다. 레이아웃의 단계인 측정 단계와 배치 단계에는 별도의 다시 시작 범위가 있습니다. 따라서 배치 단계의 상태 읽기가 그 전 단계인 측정 단계를 다시 호출하지 않습니다. 하지만 이 두 단계는 밀접하게 관련된 경우가 많으므로 배치 단계의 상태읽기가 측정단계에 영향을 미칠 수 있습니다.
3단계 - 그리기
그리기 코드 중 상태 읽기는 그리기 단계에만 영향을 미칩니다.
Composition에서는
@Composable함수와@Composable람다식에서 상태를 읽습니다. 그리고 콘텐츠가 변경되었다면 Layout에 영향을 주게 됩니다.
Layout에서는 측정 단계에서
LayoutModifier인터페이스의MeasureScope.measure메서드 등을 실행합니다. 그리고 배치 단계에서Modifier.offset { … }등의 메서드를 실행합니다. 만약 UI의 크기나 위치가 변경되었다면 Drawing에 영향을 주게 됩니다.
Drawing에서는 그리기 단계에만 영향을 미칩니다. Canvas()함수 등을 실행합니다.
상태 읽기 최적화
위에서 설명했듯이 Compose에서 상태를 읽을 때는 단계들이 각각 상태를 읽습니다. 따라서 상태를 읽을 때는 상태가 변경되었을 때 최소한의 단계만 실행될 수 있도록 해야합니다. 물론 컴포지션 단계에서도 상태를 읽어야할 상황이 있을 수 있는데, 이때는 상태 변경을 필터링하여 Recomposition을 최소화 해야합니다.
이렇게 해서 Compose의 단계에 대해 알아보았습니다. 다음 글에서는 아키텍쳐 레이어링에 대해 알아보도록 하겠습니다. 끝까지 읽어주셔서 감사하고 즐거운 개발 되세요😌.
참고 - Compose 단계
