📌Jetpack Compose에서 Callback 함수를 사용하는 이유와 장점

✅ 0. 사전 정보

Callback 함수란?

Callback 함수는 특정 이벤트가 발생했을 때 실행되는 함수로, 보통 고차 함수(higher-order function) 로 전달됩니다. Jetpack Compose에서는 상태(state) 가 변경되었을 때 UI를 업데이트하기 위해 콜백을 자주 사용합니다.

---

Callback을 사용하는 이유

Jetpack Compose에서 컴포저블(Composable) 함수는 상태(state)를 직접 변경하지 않고, 상위 계층(부모)에서 전달받은 이벤트 핸들러(Callback)를 호출해야 합니다. 이는 단방향 데이터 흐름(Unidirectional Data Flow, UDF) 을 유지하기 위함입니다.

---

단방향 데이터 흐름이란?

단방향 데이터 흐름이란, 앱의 상태(State)가 오직 한 방향으로만 변경되도록 관리하는 패턴입니다.
즉, 데이터는 위(부모)에서 아래(자식)로 흐르고, 이벤트는 아래(자식)에서 위(부모)로 흐르는 구조를 의미합니다.

✅ 1. 단방향 데이터 흐름 유지

Jetpack Compose는 상태(state)와 UI를 분리하는 것을 원칙으로 합니다. UI 요소가 직접 상태를 변경하면 유지보수가 어렵고, 예측이 힘들어집니다. Callback을 사용하면 이벤트가 발생했을 때 상태를 상위 계층에서만 변경하도록 강제할 수 있습니다.

🔹 예시: 잘못된 방식 (UI에서 상태 직접 변경)

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text(text = "Count: $count")
        Button(onClick = { count++ }) {  // UI에서 직접 상태 변경 ❌
            Text("Increase")
        }
    }
}

이렇게 하면 UI가 상태를 직접 변경하기 때문에 단방향 데이터 흐름이 깨집니다.

🔹 올바른 방식: Callback을 사용한 상태 변경

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }

    Counter(count = count, onIncrement = { count++ })  // Callback 사용 ⭕
}

@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
    Column {
        Text(text = "Count: $count")
        Button(onClick = onIncrement) { // 상태 변경을 부모에게 위임
            Text("Increase")
        }
    }
}

✅ 이렇게 하면 CounterScreen이 상태를 관리하고, Counter 컴포저블은 UI 역할만 담당하기 때문에 단방향 데이터 흐름을 유지할 수 있습니다.

---

✅ 2. 재사용성 & 컴포넌트 분리

Callback을 사용하면 컴포저블을 더 모듈화하고 재사용 가능하게 만들 수 있습니다. 즉, 상태를 직접 관리하는 것이 아니라 외부에서 전달받은 이벤트 핸들러를 호출하기만 하면 되기 때문입니다.

🔹 예시: 재사용 가능한 버튼 컴포넌트

@Composable
fun CustomButton(label: String, onClick: () -> Unit) {
    Button(onClick = onClick) {  // 이벤트를 외부에서 전달받음
        Text(text = label)
    }
}

@Composable
fun Screen() {
    Column {
        CustomButton(label = "Click Me", onClick = { println("Button Clicked!") })
        CustomButton(label = "Delete", onClick = { println("Item Deleted!") })
    }
}

✅ CustomButton은 버튼을 그리기만 하고, 실제 동작은 호출하는 곳에서 결정할 수 있어 재사용성이 높아집니다.

---

✅ 3. 테스트가 용이해짐

Callback을 사용하면 특정 UI 요소가 실행될 때 어떤 동작이 수행되는지 쉽게 테스트할 수 있습니다. UI를 테스트할 때, 실제 상태 변경 없이 함수 호출 여부만 확인하면 되기 때문입니다.

🔹 예시: UI 테스트

@Test
fun testButtonClick() {
    var clicked = false
    val onClick = { clicked = true }

    composeTestRule.setContent {
        CustomButton(label = "Test", onClick = onClick)
    }

    composeTestRule.onNodeWithText("Test").performClick()
    assertTrue(clicked)  // Callback이 실행되었는지 확인
}

✅ Callback을 사용하면 UI를 독립적으로 테스트할 수 있으며, 실제 상태 변경 없이 이벤트 동작만 검증할 수 있습니다.

---

✅ 4. Compose의 Recomposing 최적화

Jetpack Compose는 상태가 변경될 때 자동으로 리컴포지션(recomposition) 을 수행합니다. 하지만 상태를 직접 변경하면 불필요한 UI 리컴포지션이 발생할 가능성이 큽니다. Callback을 사용하면 부모가 변경된 부분만 리컴포지션을 유도하므로 성능이 최적화됩니다.

🔹 예시: 성능 최적화

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }

    Counter(count, onIncrement = { count++ })
}

@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
    Column {
        Text("Count: $count") // count만 변경될 때 리컴포지션됨
        Button(onClick = onIncrement) {
            Text("Increase")
        }
    }
}

✅ Counter 자체는 상태를 가지지 않으므로, 필요할 때만 리컴포지션이 일어나 성능이 향상됩니다.

---

🚀 정리: Callback 함수의 장점

장점	설명
✅ 단방향 데이터 흐름 유지	UI에서 직접 상태를 변경하지 않고, 부모가 상태를 관리하도록 강제함
✅ 컴포넌트의 재사용성 증가	UI와 로직을 분리하여 다양한 곳에서 재사용 가능
✅ 테스트 용이성	실제 상태 변경 없이 함수 호출 여부만 확인 가능
✅ 성능 최적화	불필요한 리컴포지션을 방지하고 필요한 부분만 리렌더링

---

💡 결론

Jetpack Compose에서 Callback을 사용하는 것은 단순한 이벤트 처리를 넘어서, 구조적으로 상태 관리와 성능 최적화를 위한 필수적인 패턴입니다. 특히 단방향 데이터 흐름(UDF)을 유지하고, 재사용 가능하면서도 성능이 최적화된 UI를 설계할 수 있도록 도와줍니다.