[안드로이드] Compose의 CompositionLocal 알아보기

CompositionLocalProvider?

사이드 프로젝트를 진행하면서 아래와 같은 코드를 작성하게 되었습니다.

 CompositionLocalProvider(LocalAnalyticsHelper provides analyticsHelper) {
    FakeGpsTheme(
        darkTheme = darkTheme,
        androidTheme = shouldUseAndroidTheme(uiState),
        disableDynamicTheming = shouldDisableDynamicTheming(uiState),
    ) {
        FakeGpsApp(networkMonitor = networkMonitor)
    }
}

해당 코드에서 CompositionLocalProvider 이 무슨 역할을 해주는지 알아보겠습니다.

---

CompositionLocal

• Android에서 명명하는 CompositionLocal의 역할

Compose offers CompositionLocal which allows you to create tree-scoped named objects that can be used as an implicit way to have data flow through the UI tree.

• 이는 CompositionLocal을 이용하여 범위를 지정하고 트리 상위에서 선언된 상태를 접근할 수 있게 해주는 것이다.

주황색 부분이 CompositionLocal 선언 부위

---

트리 상위에서 선언된 상태?

• Composable Function은 Tree 구조로 구성
• 이때 State는 가장 높은 노드에 선언해야함
  • State Hoisting - 상태 호이스팅
  • Stateful한 Composable을 Stateless하게 만드는 방법
  • 자식 Composable의 state를 부모 state로 끌어올려서 자식을 Stateless하게 만듬

---

Composable의 상태

• Composable Function의 상태는 일반적으로 자식 노드로 상태가 전달
• Depth가 크면 클수록 상태를 전달하기가 복잡해짐

---

Composable 상태 전달 예시

• Composable Function Depth가 n이라고 하면, 최대 노드의 개수는 2^n - 1 이다.
• 이로 인하여 모든 노드함수에 매개변수를 추가하면 2^n - 1 개를 추가하게 되는 것이다.

---

CompositionLocal 선언

staticCompositionLocalOf 사용

val staticCompositionLocal = staticCompositionLocalOf {
    error ( "제공된 상태 없음" ) 
}

• 자주 변경되지 않는 상태를 저장할 때 이용
• 상태가 변경되면 상태가 할당된 노드의 하위 노드를 모두 recomposition

---

compositionLocalOf 사용

val ColorCompositionLocal = compositionLocalOf { 
    error ( "색상이 제공되지 않음" )
}

• 변경이 잦은 상태를 다룰 때 이용
• 현재 상태에 접근하는 composable function만 recomposition

---

CompositionLocalProvider 사용

• 자식까지 CompositionLocal을 제공하기 위해서는 CompositionLocalProvider 사용

val ColorCompositionLocal = compositionLocalOf { 
    Color.White // Default Color Value
}

@Composable
fun ComposableFunction() {
    ...
    CompositionLocalProvider(ColorCompositionLocal.provides(Color.Blue)) {
        // State -> Color.Blue
        SubComposableFunction()
    }
}

@Composable()
fun SubComposableFunction{
		...
}

---

CompositionLocalProvider 원형

• https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary#CompositionLocalProvider(kotlin.Array,kotlin.Function0)

androidx.compose.runtime  |  Android Developers

@Composable
@NonSkippableComposable
fun CompositionLocalProvider(
    vararg values: ProvidedValue<*>,
    content: @Composable () -> Unit
): Unit

• vararg 예약어를 통해서 1개 이상을 제공할 수 있다는 것을 확인할 수 있다

---

Reference

• 찰스의 안드로이드
  • https://www.charlezz.com/?p=46403
• https://medium.com/@kamal.lakhani56/compositionlocalprovider-jetpack-compose-2ecce8ba1c07