Jetpack Compose에서 Retain API 유지

Source: Dev.to

🚀 Jetpack Compose에서 Retain API 마스터하기: 왜 그리고 어떻게 중요한가

Jetpack Compose를 사용한 최신 Android 개발에서는 상태를 효과적으로 관리하는 것이—특히 구성 변경 시—탄력적이고 부드러운 UI 경험을 구축하는 데 필수적입니다. Retain API는 수동 저장/복원 로직 없이 상태를 보존하도록 도와줍니다.

Retain API란?

Jetpack Compose의 Retain API는 구성 변경(예: 기기 회전), 프로세스 종료, 그리고 네비게이션 라이프사이클 이벤트 전반에 걸쳐 상태를 보존할 수 있게 해줍니다. remember나 mutableStateOf와 달리, 이들은 컴포지션의 수명 동안만 존재하지만 Retain API는 상태를 lifecycle owner(예: ViewModel 또는 NavBackStackEntry)에 연결하여 이러한 이벤트가 발생해도 상태가 유지되도록 합니다.

왜 Retain API를 사용하나요?

• ✅ 구성 변경을 견딥니다 (예: 화면 회전)
• ✅ 프로세스 종료 복원과 함께 작동합니다
• ✅ ViewModel 및 Navigation과 통합됩니다
• ✅ onSaveInstanceState보다 더 간결하고 Compose 친화적입니다

상태 지속성을 보일러플레이트 없이 간소화하여, 기능 구현에 집중할 수 있게 해줍니다.

Core Concepts

핵심 개념

예시: Retain API로 폼 상태 유지

Retain API 없이 (문제)

@Composable
fun ProfileForm() {
    var name by remember { mutableStateOf("") }
    var email by remember { mutableStateOf("") }

    Column {
        TextField(value = name, onValueChange = { name = it }, label = { Text("Name") })
        TextField(value = email, onValueChange = { email = it }, label = { Text("Email") })
    }
}

디바이스를 회전하면 상태가 사라집니다.

Retain API 사용 시

@Composable
fun ProfileFormRetained() {
    val retainedName = rememberRetained { mutableStateOf("") }
    val (name, setName) = retainedName

    val retainedEmail = rememberRetained { mutableStateOf("") }
    val (email, setEmail) = retainedEmail

    Column {
        TextField(value = name, onValueChange = setName, label = { Text("Name") })
        TextField(value = email, onValueChange = setEmail, label = { Text("Email") })
    }
}

이제 상태가 회전에도 유지되며 코드가 더 간결해집니다.

Retain API를 ViewModel과 함께 사용하기

class ProfileViewModel(
    savedStateHandle: SavedStateHandle
) : ViewModel() {
    var name by savedStateHandle.getState("name") { "" }
    var email by savedStateHandle.getState("email") { "" }
}

@Composable
fun ProfileScreen(vm: ProfileViewModel = hiltViewModel()) {
    Column {
        TextField(
            value = vm.name,
            onValueChange = { vm.name = it },
            label = { Text("Name") }
        )
        TextField(
            value = vm.email,
            onValueChange = { vm.email = it },
            label = { Text("Email") }
        )
    }
}

SavedStateHandle을 사용하여 ViewModel에 상태를 저장하면 프로세스 종료 복구와 회전 시 상태 유지가 보장됩니다.

모범 사례

• ✨ 재구성을 견뎌야 하는 UI 상태에는 rememberRetained를 선호하세요.
• ✨ 프로세스 종료 및 네비게이션 상태를 위해 ViewModel과 함께 SavedStateHandle을 사용하세요.
• ✨ 유지된 상태를 논리적으로 적절한 위치에 범위 지정하세요 (예: ViewModel vs. Composable).

리소스 링크

• Android Dev — Jetpack Compose 상태 및 상태 호이스팅
• ViewModel의 SavedStateHandle
• Jetpack Compose API 레퍼런스

Final Thoughts

The Retain API is an under‑the‑hood feature that makes real‑world Compose apps robust and maintainable. Whether you’re handling forms, navigation state, or UI flags, understanding how to retain state confidently will boost both developer productivity and user experience.

Happy Composing! 🎨📱