[TIL] 🌼24/05/16🌼#CompositionLocal

[TIL] 🌼24/05/16🌼#CompositionLocal

CompositionLocal

📌참고자료

• Locally scoped data with CompositionLocal | Android Developers
• [Compose] CompositionLocal
• CompositionLocalProvider | Android Developers

• 일반적으로 UI Tree의 상위 Composable에서 하위 Composable로 데이터를 전달하기 위해 매개변수를 통해 데이터 명시적으로 전달
  -> 상위 Composable과 하위 Composable의 UI Tree에서의 깊이 차이가 큰 경우, 번거로움!

• CompositionLocal?
  Composition 아래로 데이터를 암시적으로 전달하는 도구

• MaterialTheme의 내부 구현에서도 CompositionLocal 사용
  • MaterialTheme는 3개의 CompositionLocal 인스턴스 제공
  • MaterialTheme.colors 프로퍼티로 LocalColors 인스턴스 접근
  • MaterialTheme.typography 프로퍼티로 LocalTypography 인스턴스 접근
  • MaterialTheme.shapes 프로퍼티로 LocalShape 인스턴스 접근
• Composition 내부에서 context 값을 가져올 때도 CompositionLocal 사용

  val resources = LocalContext.current.resources

• CompositionLocal instance is scoped to a part of the Composition
  • UI tree에서의 깊이 별로 다른 CompositionLocal 제공 가능
  • CompositionLocal.current: 해당 Composition의 가장 가까운 조상의 CompositionLocal 인스턴스 값

• CompositionLocal 생성 방법
  • compositionLocalOf
    • current 프로퍼티를 통해 값을 접근하는 Composition들을 Compose가 트래킹함
      -> 값이 변경되었을 때, 해당 Composition들만 recompose됨
  • staticCompositionLocalOf
    • Compose가 트래킹하지 X
      -> 값이 변경되었을 때, content 람다 내부의 모든 Compositione들 recompose됨
    • 거의/절대 변경되지 않은 값을 제공할 때 사용 -> performance benefits

// LocalElevations.kt

data class Elevations(val card: Dp = 0.dp, val default: Dp = 0.dp)

// Define a CompositionLocal global object with a default
// This instance can be accessed by all composables in the app
val LocalElevations = compositionLocalOf { Elevations() }

• CompositionLocalProvider를 통해 CompositionLocal 새로운 값 제공하기
  -> content 람다 내부의, 새롭게 제공받은 값을 사용하는 composition들 recompose됨

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

// MyActivity.kt
class MyActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            // Calculate elevations based on the system theme
            val elevations = if (isSystemInDarkTheme()) {
                Elevations(card = 1.dp, default = 1.dp)
            } else {
                Elevations(card = 0.dp, default = 0.dp)
            }

            // Bind elevation as the value for LocalElevations
            CompositionLocalProvider(LocalElevations provides elevations) {
                // ... Content goes here ...
                // This part of Composition will see the `elevations` instance
                // when accessing LocalElevations.current
            }
        }
    }
}

@Composable
fun SomeComposable() {
    // Access the globally defined LocalElevations variable to get the
    // current Elevations in this part of the Composition
    Card(elevation = LocalElevations.current.card) {
        // Content
    }
}