Composable 함수

Composable 함수란?

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

Composable 함수는 Jetpack Compose에서 UI를 구성하는 가장 기본적인 요소로, @Composable 어노테이션이 적용된 함수이다. 이 함수는 다른 Composable 함수를 호출할 수 있다.

Composable 함수는 재사용 가능한 작은 단위로 만들어지고, 이를 기반으로 복잡한 UI를 구성함으로써 UI를 효율적으로 작성하고 유지 관리할 수 있다.

Composable 함수는 Composable 또는 UI Component라고도 부른다.

Composable 함수의 특징

1. @Composable 어노테이션

   • 모든 Composable 함수는 @Composable 어노테이션으로 정의되어야 한다.
   • 이 어노테이션은 컴파일러에 해당 함수가 UI를 구성하기 위한 함수임을 알린다.

2. 데이터를 입력받고 UI를 정의

   • Composable 함수는 매개변수를 통해 데이터를 전달받고, 이를 기반으로 UI를 동적으로 생성한다.

3. 멱등성(Idempotence)

   • 동일한 입력값으로 여러 번 호출되더라도 항상 동일한 결과를 반환한다.
   • 부작용(Side Effect)을 발생시키지 않으며, 전역 변수를 수정하지 않는다.

4. 트리 구조

   • Composable 함수는 트리 구조의 노드로 표현된다.
   • 각 함수는 하나의 UI 노드를 생성하거나, 하위 Composable 호출을 통해 더 복잡한 구조를 생성한다.

5. Composable 함수는 순서대로 실행되지 않는다.

   • 높은 우선순위를 가진 UI가 있다면 먼저 그린다.

   @Composable
   fun ButtonRow(){
   	MyNavigation{
   		StartScreen() // 1
   		MiddleScreen() // 2
   		EndScreen() // 3
   	}
   }
   
   // 위 코드가 꼭 1 -> 2 -> 3 순서로 실행된다는 보장이 없다는 의미다.

6. Composable 함수는 병렬적으로 실행할 수 있다.

Composable 함수의 작동 방식

노드와 트리

• 모든 Composable 함수는 Composable 트리를 구성한다.
• 노드들은 Composable 트리의 구성 요소로서 작동하며, 런타임에서 메모리에 유지된다.

Composer

@Composable
fun NamePlate(name: String, lastname: String) { 
	Column(modifier = Modifier.padding(16.dp)) {
		Text(text = name)
		Text(text = lastname, style = MaterialTheme.typography.subtitle1)
	}
}

// Compose Compiler는 위 코드를 아래와 같이 변환

fun NamePlate(name: String, lastname: String, $composer: Composer<*>) { 
	...
  Column(modifier = Modifier.padding(16.dp), $composer) {
    Text(
      text = name,
      $composer
    )
    Text(
      text = lastname,
      style = MaterialTheme.typography.subtitle1,
      $composer
    )
	}
	...
}

• Composer는 Compose Runtime에서 사용되는 내부 도구로, Composable 트리의 상태를 관리한다.
• 모든 Composable 함수는 호출될 때 컴파일러에 의해 Composer 객체를 암묵적으로 전달받는다.
• Composable 함수는 Composable 함수에서만 호출될 수 있는데, 이는 트리가 오직 Composable 함수로만 구성되도록 보장하고, Composer가 트리를 따라 하양 전달될 수 있도록 한다.
• Composer는 트리의 업데이트 및 재구성을 처리한다.

참고자료

Compose 이해

Jetpack Compose Internals - JORGE CASTILLO