DATA BINDING

data binding이란?

데이터 값이 직접 UI에 관여하는 방식을 의미한다.

 

예제

예제로 버튼을 누르면 화면의 value가 1씩 증가하는 counter를 만들어 보았다. (챗지피티의 도움으로..)

(회사에서 쓰고 있는 거라서 에뮬레이터의 device가 차량용인건 무시하면 된다..)\

 

처음 시작 시 0으로 뜨는 화면

increase 버튼을 5번 눌러 counter를 5로 만든 화면

 

위의 두 그림처럼, counter 값이 0에서 시작해 Increase 버튼을 누르면 1씩 증가하는 예제이다.

 

1. data binding을 사용하지 않은 경우

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
 
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CounterWithoutBinding()
        }
    }
}
 
@Composable
fun CounterWithoutBinding() {
    // 내부 상태 관리
    var counter by remember { mutableStateOf(0) }
 
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Counter: $counter",
            style = MaterialTheme.typography.headlineLarge
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { counter++ }) {
            Text("Increase")
        }
    }
}

 

2. data binding을 사용한 경우

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
 
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 상태를 Activity 또는 ViewModel에서 관리
            var counter by remember { mutableStateOf(0) }
            CounterWithBinding(counter = counter, onIncrease = { counter++ })
        }
    }
}
 
@Composable
fun CounterWithBinding(counter: Int, onIncrease: () -> Unit) {
    // UI는 상태를 받아 렌더링만 함
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Counter: $counter",
            style = MaterialTheme.typography.headlineLarge
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = onIncrease) {
            Text("Increase")
        }
    }
}

 

둘다 같은 결과를 보여주지만, 코드를 보면 차이를 볼 수 있다.

data binding을 사용하지 않은 경우에는, composable 내부에서 state를 관리한다.

따라서 재사용성이 낮고, 상태와 UI가 결합되어 테스트가 비교적 어렵다.

 

반면에, data binding을 사용한 경우에는, state를 호출자(여기서는 activity)에서 관리하므로 재사용성이 높고 테스트가 용이하다.

즉, click시에 UI에 접근하지 않는 것이다.

 

간단한 프로그램을 만들 경우에는 composable 내부에서 state를 관리하도록 해도 괜찮지만,

UI가 많고 복잡한 프로그램의 경우에는 data binding을 사용하는 것이 효율적일 것이다.