Compose에서 구성변경 시 저장되지 않는 문제 해결하기

문제 알아보기

문제

지난 번에 남은 금액이 저장되지 않는 문제가 있었다.

원인

var chargedMoney by mutableIntStateOf(0) private set  

mutableStateOf는 변경 가능한 상태를 나타내는 방식이지만 구성 변경 시에는 초기화가 된다는 문제가 있다.

따라서 이전에 저장한 남은 값이 손실되는 문제가 발생한 것이었다.

 

해결

해결하기 위해서는 mutableStateOf 대신 DataStore 를 사용하여 데이터를 비동기적으로 읽고 구성 변경 시에도 데이터가 보존되도록 할 수 있다.

 

결과

 

 

코드로 알아보기

이전코드

   private suspend fun saveChargedMoney(value:Int) {
        dataStore.edit { preferences ->
            preferences[PreferencesKeys.CHARGED_MONEY] = value  }

    }

    var chargedMoney by  mutableIntStateOf(0)
        private set

    fun updateChargedMoney(input: Int) {
        viewModelScope.launch {
            chargedMoney += input
            saveChargedMoney(chargedMoney)
        }
    }

 

수정된 코드

 fun updateChargedMoney(input: Int) {
        viewModelScope.launch {
            dataStore.edit { preferences ->
                val currentChargedMoney = preferences[PreferencesKeys.CHARGED_MONEY] ?: 0
                val newChargedMoney = currentChargedMoney + input
                preferences[PreferencesKeys.CHARGED_MONEY] = newChargedMoney
            }
        }
    }

 

변경된 부분 : chargedMoney 값을 업데이트할 때 저장하는 방식

 

원래 코드

 mutableIntStateOf를 통해 chargedMoney를 변경 가능한 상태를 나타내었다. mutableState는 ui 상태를 저장하고 변경할 수 있지만, 앱이 종료되거나 구성 변경이 발생하면 상태가 초기화되고 재설정된다.

이로 인해 남은 금액이 다시 초기화된 후 채워지는 문제가 발생한 것이었다. 

 

수정된 코드 

이를 해결하기 위해서는 mutableState인 chargedMoney를 직접 사용하지 않고 DataStore에서 값을 읽어와 업데이트해주는 방법을 사용하였다. 구성 변경이 발생하더라도 남은 금액을 업데이트할 때 초기화되지 않고 채워진 금액인 input을  반영할 수 있다.

 

dataStore.edit 함수를 통해 데이터를 트랜잭션 방식으로 업데이트할 수 있다.

1️⃣ 현재 dataStore에 저장된 남은 금액 값을 가져와 currentCHargedMoney 변수에 저장한다.

2️⃣ 파라미터로 받은 채운 금액 값인 input을 더한 후 newChargedMoney 변수에 넣어준다. 

3️⃣ dataStore에 newChargedMoney값을 저장해준다.