Jetpack Compose로 UI를 개발하다 보면 화면 상태를 저장하고 복원해야 하는 경우가 발생합니다.
- 텍스트 입력 값 유지
- 체크박스/스위치 선택 상태
- 탭 선택 위치
- 스크롤 위치
- 화면 회전 시 상태 유지
이처럼 UI 상태는 앱 곳곳에서 자주 사용되는데, 상태를 어떻게 저장할지에 따라 사용자 경험이 달라질 수 있습니다. Compose에서는 상태를 저장하기 위해 대표적으로 remember와 rememberSaveable 두 가지를 제공하는데, 이번 글에서는 둘의 차이와 실제 사용법을 알아보겠습니다.
🚀 remember란?
remember는 컴포지션이 유지되는 동안 값을 메모리에 기억하도록 하는 API입니다. 즉, 화면이 recomposition 되어도 값이 유지됩니다. 하지만 중요한 점은 프로세스 종료·화면 회전 등 구성 변경(Configuration Change)에는 값이 유지되지 않는다는 점입니다. 메모리에 저장하기 때문에 성능이 빠르다는 특징도 있습니다.
예시
var name by remember { mutableStateOf("") }- 화면 내에서만 상태 유지
- 컴포저블이 재구성(recomposition)될 때 값 유지
- 액티비티 재생성 시 초기화 됨
remember는 간단한 UI 상태나 일시적인 값을 저장해야 할 때, 화면 회전과 같은 구성 변경으로 초기화되어도 문제가 없는 경우, 혹은 상태를 커스텀 로직으로 직접 관리하고자 할 때 사용하기 적합합니다.
🚀 rememberSaveable?
rememberSaveable은 remember와 동일하게 상태를 저장하지만,
onSaveInstanceState() 기반으로 값을 보존하기 때문에 화면 회전과 같은 구성 변경이나 시스템이 백그라운드에서 프로세스를 일시적으로 종료했다가 복구하는 상황에서도 상태를 유지합니다. remember와 다르게 값을 SavedStateHandle/Bundle에 값을 저장합니다. Bundle에 값을 저장하여 오버헤드가 발생하여 remember보다 성능이 아주 약간 느릴 수 있습니다.
예시
var name by rememberSaveable { mutableStateOf("") }- 구성 변경(Configuration Change)에도 값 유지
- 프로세스가 죽었다가 다시 복원되어도 유지 가능
- 기본 타입, Parcelable, Serializable 등 저장 가능
rememberSaveable은 텍스트 입력 값, 체크박스/라디오 버튼 선택 상태, 페이지 번호, 스크롤 위치, 화면 회전해도 유지되어야하는 값이 필요할 때 사용하기 적합합니다.
🎯 결론
Jetpack Compose에서는 상태 관리가 제대로 이루어지지 않으면 화면 회전이나 재구성 시 값이 예상치 못하게 초기화되어 사용자 경험에 부정적인 영향을 줄 수 있습니다. 이러한 문제는 remember와 rememberSaveable을 상황에 맞게 사용함으로써 효과적으로 방지할 수 있으며, 이를 통해 더욱 안정적이고 신뢰할 수 있는 UI를 제공할 수 있습니다.
