Jetpack Compose CompositionLocal 에 대해 알아봅시다

컴포즈를 사용하다보면 종종 CompositionLocal 을 마주치곤 한다.

테마를 커스텀하고 싶을때 사용하곤 했는데 

CompositionLocal 은 어떻게 동작하길래 테마 커스텀에서 사용됐는지 개념을 알아보자.

 

CompositionLocal 이 필요한 이유

컴포저블 함수들은 트리형태로 구성된다.

그래서 상태의 관리를 편하게 하기 위해서 보통 상태 호이스팅이라는 개념으로

상위 노드에서 관리하고 하위 노드로 전파한다.

그런데 극단적으로 트리의 깊이가 100개면 어떨까. 이 상태를 아래까지 다 전파하는건

쉽지 않을거다.

 

이때 CompositionLocal을 유용하게 써먹을 수 있는데 

너무 대충 그렸지만 아래 같은 느낌으로

컴포지션로컬의 영역에 있는 컴포저블끼리는 하위에서 상위 노드의 상태에 접근하도록 제공하는 역할을 한다.

그림은 저렇게 한정 범위만 영역으로 잡히도록 그려졌지만

가장 상위에서 CompositionLocal 의 범위를 지정한다면 모든 영역에 제공하게 될 것이다.

 

 

CompositionLocal 을 사용하는 방법

 

CompositionLocal을 만드는 2가지 방법은 다음과 같다.

// StaticProvidableCompositionLocal로 만들기
val LocalLinkZipColor = staticCompositionLocalOf {
   Color.Blue
}

// DynamicProvidableCompositionLocal로 만들기
val dynamicCompositionLocal = compositionLocalOf {
   lightColors() //상태
}

두가지 방법이 있는데 , 차이에 대해선 따로 설명하겠다.

위 처럼 만들어주고  아래처럼 CompositionLocalProvider  를 이용해서 상위 컴포저블에서 하위 컴포저블로 제공되도록 만들어준다.

@Composable
fun Composable1() {
    ...
    //여기서 Red로 지정해줬다.
    CompositionLocalProvider(LocalLinkZipColor.provides(Color.Red)) {
        Composable4()
    }
}

@Composable
fun Composable4() {
    Text(
    //이 컴포저블의 상위 컴포저블인 Composable1 에서 Red로 제공했기 때문에 여기서 current 는 Red가 된다
    //또 다시 변경하면 이후에 생기는 하위의 컴포저블들은 변경된 값으로 적용되게 된다.
        modifier = Modifier.background(color = LocalLinkZipColor.current),
        text = "Composable4"
    )
    ...
}

 

 

staticCompositionLocalOf,  compositionLocalOf 차이

staticCompositionLocalOf() 는 자주 변경되지 않는 상태를 저장할때 사용하면 좋다.

상태가 변경될때 할당된 노드의 하위 노드를 모두 다시 그리게 된다.

불필요한 리소스를 사용하게 된다.

 

반대로 compositionLocalOf 는 자주 변경되는 상태를 저장할때 사용하면 좋다.

현재 상태에 접근하는 노드에 대해서만 재구성을 수행하기 때문이다. 

 

상황에 맞게 적절히 사용하면 된다.