Android Jetpack Compose MVVM

MVVM(Model-View-ViewModel)은 비즈니스 로직 또는 백엔드 로직(모델)의 개발에서 GUI(뷰)의 개발을 쉽게 분리하여 뷰가 종속되지 않도록 하는 소프트웨어 아키텍처 패턴입니다. 특정 모델 플랫폼에서. MVVM의 ViewModel은 개체를 쉽게 관리하고 표시할 수 있도록 모델에서 데이터 개체를 노출하는 역할을 합니다. 이런 점에서 ViewModel은 뷰라기보다 모델에 가깝고 뷰의 표시 로직 전부는 아니더라도 대부분을 처리합니다. ViewModel은 중재자 패턴을 구현하여 뷰에서 지원하는 사용 사례 집합을 중심으로 백엔드 논리에 대한 액세스를 구성할 수 있습니다.

JetPack Compose에서 이 3개 레이어와 레이어가 서로 어떻게 관련되어 있는지 보여주는 작은 샘플을 함께 만들었습니다. 속성/메소드 이름 외에는 어떤 개체도 다른 개체에 대해 알 필요가 없습니다. 각 레이어는 다른 레이어와 완전히 독립적으로 구축할 수 있습니다.

샘플 모델

import java.util.*

data class User(
    var id: UUID,
    var name: String
)

샘플 ViewModel

여기에는 보기와 상호 작용하는 데 필요한 모든 것이 포함되어야 합니다. 지금은 사용자와 addUser 함수라는 2개의 멤버가 포함되어 있습니다. 뷰 모델에서 사용자 컬렉션의 상태를 유지하기 위해 mutableStateListOf를 사용하고 있습니다.

import androidx.compose.runtime.*
import androidx.lifecycle.ViewModel

class UserViewModel : ViewModel() {
    private val _users = mutableStateListOf<User>()

    val users: List<User>
        get() = _users

    fun addUser(user: User) {
        _users.add(user)
    }
}

샘플 보기

이제 보기입니다. 이들은 데이터 표시 방법을 정의하는 DataTemplate입니다. ViewModel은 구성 변경을 유지하므로 Compose 코드를 호스팅하는 활동 또는 프래그먼트 수명 주기를 처리할 필요 없이 UI와 관련된 상태 및 이벤트를 캡슐화할 수 있습니다.

@Composable
fun UserView() {
    val vm by remember { mutableStateOf(UserViewModel()) }
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Users") },
                actions = {
                    IconButton(onClick = {
                        vm.addUser(User(UUID.randomUUID(), "User"))
                    }) {
                        Icon(Icons.Filled.Add, null)
                    }
                })
        },
        content = {
            Column(modifier = Modifier.padding(16.dp)) {
                LazyColumn(modifier = Modifier.fillMaxHeight()) {
                    items(vm.users) {
                        Column {
                            Text(it.name)
                            Text("${it.id}")
                        }

                    }
                }
            }
        }
    )
}

다음과 같이 ViewModel을 Compose UI 트리 위로 끌어올려 더 전역 상태를 유지할 수 있습니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val vm = UserViewModel()
        setContent {
            MaterialTheme {
                UserView(vm)
            }
        }
    }
}

@Composable
fun UserView(vm: UserViewModel) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Users") },
                actions = {
                    IconButton(onClick = {
                        vm.addUser(User(UUID.randomUUID(), "User"))
                    }) {
                        Icon(Icons.Filled.Add, null)
                    }
                })
        },
        content = {
            Column(modifier = Modifier.padding(16.dp)) {
                LazyColumn(modifier = Modifier.fillMaxHeight()) {
                    items(vm.users) {
                        Column {
                            Text(it.name)
                            Text("${it.id}")
                        }

                    }
                }
            }
        }
    )
}