0. Compose에서의 State 생성

• 가장 일반적으로, remember를 사용하여 state를 생성할 수 있음.
  • 위 방법이 틀린 것은 아니나 실제 앱의 관점에서 생각해 볼 필요가 있음.

1. 캐싱(저장) 문제

remember 는 Recomposition이나 프로세스 종료가 발생하지 않는 한 모든 값을 캐시(저장)함.

다만 Recomposition이나 프로세스 종료 발생 시 캐시가 날아감.

/**
 * 이처럼 Composable에 remember를 활용해 State를 저장하는 방식이 일반적.
 */
@Composable
fun LoginScreen() {
    var emailText by remember {
        mutableStateOf("")
    }

    TextField(
        value = emailText,
        onValueChange = { emailText = it }
    )
}

상기 방식 대신, 아래처럼 State를 ViewModel에 저장하는 것을 추천함.

뷰모델 내에서는 SavedStateHandle을 사용할 수 있어 프로세스가 종료된 이후에도 State 복원 가능.

/**
 * ViewModel
 */
 class ViewModel(
    private val savedStateHandle: SavedStateHandle
): ViewModel() {
    val emailText by savedStateHandle.saveable("emailText") {
        mutableStateOf("")
    }
    
    fun onEmailTextChange(value: String) {
        savedStateHandle["emailText"] = value 
    }
}

@Composable
fun AppRoot() {
    val navController = remmeberNavController()
    NavHost(
        navController = navController,
        startDestination = "login"
    ) {
        composable("login") {
            val viewModel = viewModel<LoginViewModel>()
            LoginScreen(
                emailText = viewModel.emailText,
                onEmailTextChange = viewModel::onEmailTextChange
            )
        }
    }
}

@Composable
fun LoginScreen(
    emailText: String,
    onEmailTextChange: (String) -> Unit
) {
    TextField(
        value = emailText,
        onValueChane = onEmailTextChange
    )
}

State를 Composable 내에 가지고 싶은 경우?

• 구성 변경이 발생해도 살아남을 수 있는 rememberSaveable 사용.