안드로이드 Jetpack Compose(컴포즈) ViewModel+LiveData

안녕하세요. 안드로이드 연구원입니다.

오늘은 긴말없이 빠르게 포스팅을 시작해보겠습니다.

 

지난 포스트에서 간단한 Todo 애플리케이션을 만들었는데

이걸 ViewModel과 LiveData를 사용해서 만들어보겠습니다.

 

https://android-lab.tistory.com/46

안드로이드 Jetpack Compose(컴포즈) 제일 쉽게 배우기/예제/강의 (ToDo만들기)

 

 

1. ViewModel, LiveData 환경 세팅

build.gradle에 라이브러리를 각 각 추가합니다.

implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1")
implementation("androidx.compose.runtime:runtime-livedata:1.5.0")

 

2. ViewModel 바꿀 부분 확인

아래는 기존 TopLevel() 컴포즈 함수입니다.

@Composable
fun TopLevel(){
    val (text, setText) = remember { mutableStateOf("") }
    val toDoList = remember { mutableStateListOf<TodoData>() }

    // 입력 로직
    val onSubmit: (String) -> Unit = { text ->
        val key = (toDoList.lastOrNull()?.key ?:0) + 1
        toDoList.add(TodoData(key, text))
        setText("")
    }

    // 컬럼
    Column {
        TodoInput(text, setText, onSubmit)
    
        LazyColumn{
            items(toDoList, key = { it.key }){ toDoData ->
                ToDo(todoData = toDoData)
            }
        }
    }
}

 

 

이 부분에서 아래 데이터를 저장하고 변경하는 부분을 ViewModel에 담아주면 되겠네요

val (text, setText) = remember { mutableStateOf("") }

val toDoList = remember { mutableStateListOf<TodoData>() }

val onSubmit: (String) -> Unit = { text ->
    val key = (toDoList.lastOrNull()?.key ?:0) + 1
    toDoList.add(TodoData(key, text))
    setText("")
}

 

3. ViewModel 만들기

ViewModel은 따로 @Composable같은 어노테이션 없이 만들 수 있습니다.

또 MainActivity에서 만드셔도 되고 다른 파일로 분리해서 만들어도 됩니다.

class ToDoViewModel : ViewModel(){

}

 

4. ViewModel, LiveData 호출

text만 입력과 출력이 되게끔 LiveData로 변환하고

그 외의 데이터는 그대로 가져왔습니다.

class ToDoViewModel : ViewModel(){
  
    private val _text = MutableLiveData("")
    val text: LiveData<String> = _text
    val setText: (String) -> Unit = {
        _text.value = it
    }

    val toDoList = mutableStateListOf<TodoData>()

    // 입력 로직
    val onSubmit: (String) -> Unit = {
        val key = (toDoList.lastOrNull()?.key ?:0) + 1
        toDoList.add(TodoData(key, it))
        _text.value = ""
    }

    // 토클 체크 로직
    val onToggle: (Int, Boolean) -> Unit = { key, checked ->
        val index = toDoList.indexOfFirst { it.key == key }
        val newData = toDoList[index].copy(done = checked)
        toDoList[index] = newData
    }
}

 

5. 

TopLevel옆에 만들어준 ViewModel을 호출하여 사용합니다.

그리고 viewModel.text.observeAsState("").value로 LiveData를 관찰하여 데이터를 가져옵니다.

그 외에 필요한 데이터들도 viewModel에서 가져와줍니다.

// 최상위
@Composable
fun TopLevel(viewModel: ToDoViewModel = viewModel()){
    // 컬럼
    Column {
        TodoInput(
            text= viewModel.text.observeAsState("").value, // liveData를 state로 변경
            onTextChange = viewModel.setText,
            onSubmit = viewModel.onSubmit
        )

        LazyColumn{
            items(viewModel.toDoList, key = { it.key }){ toDoData ->
                ToDo(todoData = toDoData, onToggle = viewModel.onToggle)
            }
        }
    }
}

 

너무나 간단하게 ViewModel을 컴포즈에서 연결하는 법을 만들어보았습니다.

그러면 앞으로도 ViewModel을 사용해서 다양한 프로젝트를 만들어가보도록 하겠습니다.

그러면 감사합니다.