[Android] Compose CompositionLocal

CompositionLocal 가 궁금하여 어떤 정의를 가지고 있고 어떠한 기능을 사용하기 위하여 쓰이는 것인지 궁금하여 본 게시물을 작성함.

CompositionLocal 란?

CompositionLocal 암시적으로 컴포지션을 통해 데이터를 전달하는 도구입니다.

이번 글에서는 Compose의 CompositionLocal의 자세한 내용, 자체 CompositionLocal을 만드는 법, CompositionLocal이 어떤 상황에 적합한 솔루션인지에 대해 알아보도록 하겠습니다.😌.

CompositionLocal 소개

일반적으로 Compose에서는 데이터가 각 Composable함수의 매개변수로 UI트리를 통해 아래로 흐릅니다. 따라서 Composable의 종속 항목이 명시적으로 됩니다.
하지만 이 방법은 색상, 스타일과 같이 널리 사용되는 데이터의 경우 번거러울 수 있습니다.

이런 경우를 위해 Compose는 CompositionLocal을 지원합니다.
이를 통해 UI 트리를 통해 데이터 흐름이 발생하는 암시적 방법으로 사용할 수 있는 트리 범위의 명명된 객체를 만들 수 있습니다.

CompositionLocal은 머티리얼 테마(MaterialTheme)에서 내부적으로 사용됩니다.

MaterialTheme: 컴포지션의 하위 부분에서 검색할 수 있는 CompositionLocal 인스턴스 세 개(색상, 서체, 도형)를 제공하는 객체입니다.
LocalColors, LocalShapes, LocalTypography 속성으로, MaterialTheme colors, shapes, typography 속성을 통해 액세스할 수 있습니다.

@Composable
fun MyApp() {
    MaterialTheme {
        // New values for colors, typography, and shapes are available
        // in MaterialTheme's content lambda.

        // ... content here ...
    }
}

@Composable
fun SomeTextLabel(labelText: String) {
    Text(
        text = labelText,
        // `primary` is obtained from MaterialTheme's
        // LocalColors CompositionLocal
        color = MaterialTheme.colors.primary // CompositionLocal 사용
    )
}

새 값을 Composition에 제공하려면 CompositionLocalProvider와 CompositionLocal를 value에 연결하는 provides중위 함수를 사용합니다.

@Composable
fun CompositionLocalExample() {
    MaterialTheme { // MaterialTheme 은 ContentAlpha.high 를 기본값으로 설정합니다.
        Column {
            Text("Uses MaterialTheme's provided alpha")
            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                Text("Medium value provided for LocalContentAlpha")
                Text("This Text also uses the medium value")
                CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
                    DescendantExample()
                }
            }
        }
    }
}

@Composable
fun DescendantExample() {
    // CompositionLocalProviders은 다른 composable함수에도 적용됩니다.
    Text("This Text uses the disabled alpha now")
}

CompositionLocalProvider의 content 람다는 CompositionLocal의 current 속성에 액세스할 때 제공된 값을 가져옵니다. 새 값이 제공되면 Compose는 CompositionLocal을 읽는 컴포지션의 부분을 재구성합니다.

Reference

• https://developer.android.com/jetpack/compose/compositionlocal