[Android] Compose UI - (2)

Compose UI 관점에서의 SubComposition

Composition은 루트 레벨 외에도 Composable 트리의 더 깊은 수준에서 생성될 수 있으며, 부모 Composition과 연결될 수도 있다.

이러한 특성을 Subcomposition이라고 한다.

각각의 모든 Composition은 부모의 Composition을 나타내는 부모의 CompositionContext에 대한 참조를 가지고 있으며 Compose UI에서 Subcomposition을 생성하는 이유는 크게 2가지가 있다.

1. 초기 composition 과정에서 특정 정보를 알 때까지 지연하기 위해
2. 하위 트리에서 생성되는 노드 타입 변경을 위해

 

초기 Composition 과정의 지연

SubcomposeLayout은 Layout과 유사하지만 레이아웃 단계에서 독립적인 Composition을 생성하고 실행한다.

이를 통해 SubcomposeLayout은 자식 Composable이 자신의 내부에서 계산된 값에만 의존하도록 한다.

한 예로 BoxWithConstraints는 부모의 제약사항을 content block 내부에 제공함으로 그 값에 따라 내용을 다르게 구성할 수 있다.

BoxWithConstraint {
	val rectangleHeight = 100.dp
	if (maxHeight < retangleHeight * 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은 부모 Composition과 독립적으로 recompose 할 수 있도록 한다.

SubcomposeLayout을 예로 보면 layout 단계에서 SubcomposeLayout의 람다에 전달되는 매개변수가 변경될 수 있으며, 이로 인해 recomposition이 발생하게 된다.

반면 Subcomposition에서 읽은 state가 변경되면, 초기 composition이 수행된 후 부모 Composition에 대한 recomposition이 예약된다.

 

서브 트리의 노드 타입 변경

서브 트리에서 노드 타입을 변경하는 사례가 있는데, 벡터 그래픽을 생성하고 관리하는 rememberVectorPainter가 그 예시이다.

벡터 Composable은 벡터 그래픽을 트리로 모델링하기 위해 자체 Subcomposition을 생성한다.

Vector Composable이 compose될 때, VNode라는 다른 노드 타입으로 Subcoposition을 구성하게 되는데, VNode는 재귀적인 타입으로서 경로나 경로의 그룹을 모델링한다.

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

위의 코드 스니펫과 같이 일반적으로 Image, Icon 또는 유사한 Composable 내에서 VectorPainter를 사용한다.

이는 벡터를 포함한 Composable이 Layout이므로 관련된 Composition에 LayoutNode를 방출한다는 의미다.

그러나 동시에 VectorPainter는 벡터를 표현하기 위해 자체적인 Subcomposition을 생성하고, 이를 이전 Composition에 연결하여 부모로 만든다.