[kotlin] Jetpack Compose에서 데이터 바인딩 사용하기

11 Dec 2023

kotlin

Jetpack Compose는 Android 앱의 사용자 인터페이스를 만들기 위한 모던하고 선언적인 도구킷입니다. 데이터 바인딩을 사용하면 UI 구성요소가 데이터와 동적으로 연결될 수 있어 효율적인 개발을 할 수 있습니다. 이번 포스트에서는 Jetpack Compose에서 데이터 바인딩을 어떻게 사용하는지 살펴보겠습니다.

데이터 바인딩이란?

데이터 바인딩은 UI 요소와 데이터 모델을 연결하여 데이터 변경을 감지하고 UI를 업데이트하는 방법입니다. 이를 통해 UI의 코드를 간소화하고 코드의 가독성을 높일 수 있습니다.

Jetpack Compose에서 데이터 바인딩 사용하기

Observable 데이터 클래스 정의

Jetpack Compose에서 데이터 바인딩을 사용하려면 observable 데이터 클래스를 정의해야 합니다. Observable 데이터 클래스는 데이터의 변경을 감지하고 UI에 알릴 수 있는 기능을 제공합니다. 예를들면, 다음과 같이 데이터 클래스를 선언할 수 있습니다.

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue

data class User(
    var name by mutableStateOf(""),
    var age by mutableStateOf(0)
)

데이터 연결

데이터 바인딩을 사용하려면 UI 요소와 데이터 모델을 연결해야 합니다. Jetpack Compose에서는 observeAsState() 함수를 사용하여 데이터 모델을 구독하고 UI에 반영할 수 있습니다.

@Composable
fun UserProfile(user: User) {
    val userName by user.name.observeAsState()
    val userAge by user.age.observeAsState()

    Text(text = "Name: $userName, Age: $userAge")
}

데이터 변경

데이터 모델의 상태가 변경될 때마다 UI도 자동으로 업데이트되어야 합니다. Observable 데이터 클래스를 사용하면 데이터가 변경될 때 UI가 자동으로 갱신됩니다.

// somewhere in your code
val user = User()

// when the data changes
user.name = "John"
user.age = 30

Jetpack Compose를 사용하면 간단한 코드로 데이터 바인딩을 구현할 수 있습니다. 이를 통해 UI와 데이터 모델 간의 복잡한 연결을 손쉽게 처리할 수 있습니다.

결론

Jetpack Compose에서 데이터 바인딩을 사용하면 UI를 업데이트하는 데 훨씬 더 효율적으로 코드를 작성할 수 있습니다. 이를 통해 Android 앱의 사용자 인터페이스를 보다 동적으로 만들 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

참고문헌: