04. Compose UI 관점에서의 Subcomposition

• Composition은 루트에만 존재하지 않으며, 하위 수준에서 부모 Composition과 연결될 수 있음 (Subcomposition)
• 각 Composition은 부모 Composition의 CompositionContext에 대한 참조를 가진다.
  • 루트 Composition은 Recomposer

1. Subcomposition 생성 : 초기 Composition 과정의 지연을 위해

   • SubcomposeLayout

     • 자식 Composable이 SubcomposeLayout 안에서 measure된 값에 의존하도록 레이아웃 단계에서 독립적인 Composition 생성, 실행

     • e.g. BoxWithConstraints

       BoxWithConstraints {
       		val rectangleHeight = 100.dp
       		if (maxHeight < rectangleHeight * 2) {
       				Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))
       		} else {
       				Column {
       						Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))
       						Box(Modifier.size(50.dp, rectangleHeight).background(Color.Gray))
       				}
       		}
       }
       

   • Subcomposition과 SubcomposeLayout 비교

     1. Composition 시점
        • Subcomposition : 생성자가 초기 Composition 시점 제어
        • SubcomposeLayout : 루트가 아닌 레이아웃 단계에 초기 Composition을 수행하도록 도와줌
     2. Recomposition
        • Subcomposition : 부모와 독립적으로 읽은 상태가 변경되면 초기 Composition 수행 후 부모 Composition에 대한 Recomposition 예약
        • SubcomposeLayout : 레이아웃 단계가 발생할 때마다 람다에 전달되는 매개변수가 변하면 Recomposition 발생

   • 같은 Composition에서 다른 노드 타입 지원이 가능한가?

     • 기본적으로 SubcomposeLayout은 LayoutNode를 방출하기 때문에 서브 트리에 사용된 노드 타입 또한 같은 노드 타입
     • Applier가 허용하는 한, 사용된 노드 타입이 여러 하위 타입의 부모 타입이라면 지원 가능
       • 하지만, Applier의 로직이 복잡해질 수 있기 때문에 가능은 하지만 단일 노드 타입을 지원하도록 고정됨

2. Subcomposition 생성 : 서브 트리의 노드 타입 변경을 위해

   • e.g. rememberVectorPainter

     • 벡터 Composable은 벡터 그래픽을 트리로 모델링하기 위해 자체 Subcomposition 생성
     • 벡터 Composable이 Composition될 때, VNode 노드 타입으로 Subcomposition 구성
       • VNode는 단일 Path나 Path 그룹 모델링

     @Composable
     fun MenuButton(onMenuClick: () -> Unit) {
     		Icon(
     				painter = rememberVectorPainter(image = Icons.Rounded.Menu),
     				contentDescription = "Menu Button",
     				modifier = Modifier.clickable { onMenuClick() }
     		)
     }
     

     • VectorPainter는 벡터를 표현하기 위한 자체 Subcomposition을 생성하고, 부모 LayoutNode에 연결

     

     • 생성된 Vector Subcomposition은 VectorPainter가 부모 Composition을 떠날 때 폐기
       • 주어진 라이프사이클을 따름

05. UI에 변경사항 반영하기

• 구체화 (Materializing)
  • Compose Runtime이 수행한 작업들의 변경 사항을 실제 UI에 반영하는 과정

06. 다양한 타입의 Applier들

• Applier는 트리에 대한 런타임의 변경 사항을 구체화 하기 위해 사용되는 추상화

  • 의존성 반전을 통해 클라이언트 라이브러리가 자체적인 Applier 구현을 할 수 있게 함

  • 플랫폼과의 통합을 위해 사용될 노드 타입을 Compose UI에서 자체적으로 선택

    

    // Compose Runtime
    public abstract class AbstractApplier<T>(
    		public val root: T
    ) : Applier<T> { .. }
    
    // Compose Ui
    internal class UiApplier(
    		root: LayoutNode
    ) : AbstractApplier<LayoutNode>(root) { .. }
    
    class VectorApplier(root: VNode) : AbstractApplier<VNode>(root) { .. }
    

• AbstractApplier

  • 특징 : 다양한 Applier간 공통 로직을 공유하기 위해 Compose Runtime에서 제공되는 기본 구현

  • 구현 :

    1. 스택 : 방문한 노드를 스택에 저장하여 현재 노드에 대한 참조 유지
    2. Applier#down : 새로운 노드 방문 시 스택에 PUSH
    3. Applier#up : 부모 노드로 돌아가면서 스택에서 POP

  • 자식 Applier와의 관계 :

    • 자식 Applier는 노드 타입과 상관없이 AbstractApplier의 탐색 로직 (down, up)을 공유할 수 있음
    • 방문하는 노드 유형에 따라 다른 Applier 구현이 사용되기도 함
      • e.g. Image 컴포저블의 경우 UiApplier(렌더링)와 VectorApplier(VectorPainter) 둘다 사용

  • e.g. condition에 따른 Applier 동작

    @Composable
    fun Sample() {  // 1. 
    		Column {  // 2. 5.
    				Row {  // 3. 4. 
    						Text("Some Text")
    						if (condition) {
    								Text("Some conditional text")
    						}
    				}
    				if (condition) {
    						Text("Some more conditional text")
    				}
    		}
    }
    

    1. Column에 대한 Applier#down 호출 → Column 노드 방문
    2. Row 노드 방문을 위한 Applier#down 호출 → Row 노드 방문
    3. 첫 번째 condition에 따른 Text에 대한 작업 수행 (삽입 혹은 삭제)
    4. 다시 부모(Column)로 돌아가기 위한 Applier#up 호출
    5. 두 번째 condition에 대한 작업 수행 (삽입 혹은 삭제)

• UiApplier

  • 목적 : 안드로이드 UI 렌더링

  • 사용 노드 타입 : LayoutNode 고정

  • 트리 구축 방식 : 상향식 트리 구축 (상향식 삽입)

    • 새 노드 삽입 시 직접적인 부모에게만 알림을 보냄
    • 안드로이드 UI 구현에서 많은 중첩 노드에 의해 알림을 보낼 조상이 많기 때문

    

• VectorApplier

  • 목적 : 벡터 그래픽 렌더링

  • 사용 노드 타입 : VNode 고정

  • 트리 구축 방식 : 하향식 트리 구축 (하향식 삽입)

    • 새 노드 삽입 시 모든 조상에게 알림을 보냄
    • 벡터 그래픽에서는 알림을 전파할 필요 없기 때문에 하향식, 상향식 모두 성능적으로 동등

    

07. 새로운 LayoutNode를 구체화 하기