🌟 Jetpack Compose의 CompositionLocal 정리

👋 들어가며

Jetpack Compose를 쓰다 보면
✨ Composable 트리 깊숙이 있는 곳까지 공통 데이터를 전달하고 싶을 때가 있어요.

예를 들어, 앱 전체에서 사용할

• 🎨 Theme 색상
• 👤 User 정보
• 🌍 Locale 설정

같은 것들이죠.

이럴 때 바로 등장하는 게 바로 CompositionLocal입니다.
오늘은 compositionLocalOf와 CompositionLocalProvider를 중심으로
그 개념과 사용법을 정리해 보겠습니다. 🚀

---

🌟 CompositionLocal은 무엇일까?

CompositionLocal은 Compose에서 제공하는 의존성 전달 메커니즘이에요.
쉽게 말해, Context나 전역 상태를 Composable 트리 전체에 공유할 수 있는 방법입니다.

• 기존 Android View 시스템에서 Context를 어디서든 꺼내 쓰던 것처럼
• Compose에서는 CompositionLocal을 통해 트리 상위에서 선언 → 하위에서 접근할 수 있습니다.

👉 중요한 점은, Composable 간 결합도를 낮추면서도 데이터 전달이 가능하다는 거예요.

---

🎯 compositionLocalOf

compositionLocalOf는 CompositionLocal을 만드는 함수입니다.
즉, 전역으로 선언할 수 있는 키를 만든다고 생각하면 돼요.

// User 이름을 전달하기 위한 CompositionLocal 정의
val LocalUserName = compositionLocalOf<String> { error("No User Found") }

여기서 error("No User Found")는
만약 Provider에서 값을 주지 않았는데 접근하면 발생할 기본 동작을 정의한 거예요.

---

⚡ staticCompositionLocalOf

compositionLocalOf와 비슷하게, 컴파일 타임에서 기본값을 보장하고 싶다면
staticCompositionLocalOf를 사용할 수 있습니다.

data class BackgroundTheme(val color: Color)

val LocalBackgroundTheme = staticCompositionLocalOf {
    BackgroundTheme(color = Color.White)
}

• staticCompositionLocalOf는 기본값이 항상 유효해야 하는 경우에 사용합니다.
• Theme, Typography, Color 같은 앱 전역 Theme 시스템에 자주 활용되며,
  BackgroundTheme처럼 기본 색상을 반드시 지정해 두어야 할 때 유용합니다.
• 런타임 오버헤드가 줄어들어 성능상 이점이 있어 권장되는 경우가 많습니다.

👉 일반적으로는 staticCompositionLocalOf 사용을 권장하고,
특별히 런타임에만 기본값을 다뤄야 하는 경우에 한해 compositionLocalOf를 선택합니다.

---

🎯 CompositionLocalProvider

그렇다면 값을 어떻게 넣을까요?
바로 CompositionLocalProvider를 사용합니다.

@Composable
fun UserScreen() {
    CompositionLocalProvider(LocalUserName provides "Jerry") {
        Greeting()
    }
}

@Composable
fun Greeting() {
    // LocalUserName 값에 접근
    val user = LocalUserName.current
    Text(text = "Hello, $user!")
}

• CompositionLocalProvider는 LocalUserName에 "Jerry"라는 값을 공급합니다.
• Greeting()에서는 LocalUserName.current를 호출해 그 값을 가져옵니다.

즉, Provider → Consumer 구조로 데이터가 흐르는 거예요.

---

✨ 주요 이점

1. 🗂️ Prop Drilling 제거
   • 매번 Composable 파라미터로 넘기지 않고도 데이터 공유 가능
2. 🔌 동적 교체
   • 특정 스코프 안에서만 다른 값을 주입 가능 (예: 다크모드, 다국어 지원)
3. 🧩 유연한 구조
   • Context, Theme, Local Settings 등을 쉽게 전역적으로 관리

---

🛠️ 간단 예시: 다크 모드 토글

val LocalDarkMode = compositionLocalOf { false }

@Composable
fun App() {
    var dark by remember { mutableStateOf(false) }

    Column {
        Button(onClick = { dark = !dark }) {
            Text("Toggle Dark Mode")
        }

        CompositionLocalProvider(LocalDarkMode provides dark) {
            ThemedText()
        }
    }
}

@Composable
fun ThemedText() {
    val darkMode = LocalDarkMode.current
    Text(
        text = if (darkMode) "🌙 Dark Mode" else "☀️ Light Mode",
        color = if (darkMode) Color.White else Color.Black
    )
}

• dark 값에 따라 Provider가 바뀌고,
• ThemedText()는 자동으로 다크/라이트 모드에 맞는 UI를 그립니다.
• Provider를 교체하면 해당 스코프 안의 모든 Composable이 자동으로 재구성되는 것이 Compose의 큰 장점입니다.

---

🚩 주의할 점

• CompositionLocal은 필요 이상 남용하면 전역 변수와 다를 바 없음
• 진짜 공통으로 필요한 데이터에만 쓰는 것이 베스트
• 상태(state) 저장보다는 읽기 전용 데이터 전달에 적합
• 값이 어디서 주입(Provider) 되었는지 추적하기가 어려울 수 있음
  • 특히 트리 깊숙한 Composable에서 여러 Provider가 중첩되면,
    현재 어떤 값이 사용 중인지 헷갈릴 수 있어 디버깅이 힘들어짐

---

✅ Best Practice

• ✅ Theme, Locale, Config 등 전역적으로 항상 필요한 값 전달에 사용
• ✅ Prop Drilling 방지 (깊은 트리 구조에서도 간편히 공유 가능)
• ❌ 비즈니스 로직이나 상태 저장에는 사용하지 말 것 (전역 변수 남용 위험)
• ❌ 값이 자주 바뀌는 데이터보다는 읽기 전용 전역 컨텍스트에 적합

---

🧾 마무리

오늘은 Compose의

• compositionLocalOf 👉 CompositionLocal 생성
• staticCompositionLocalOf 👉 성능/안정성 향상된 CompositionLocal 생성
• CompositionLocalProvider 👉 CompositionLocal 값 주입

을 살펴봤습니다.

이 조합만 잘 써도

• 🎨 Theme 관리
• 🌍 Locale / 언어 설정
• 👤 User 세션 정보 전달

같은 기능을 깔끔하게 구현할 수 있어요.

---

🚀 결론:
필요한 Context를 전역처럼 쓰되, Compose 철학에 맞게 안전하고 유연하게 관리하자!