[Jetpack Compose] remember와 mutableStateOf

Jetpack Compose를 학습하면서 remember와 mutableStateOf를 자주 사용하는데 둘의 역할이 헷갈려 정리해봤다 🤓

우선 Jetpack Compose는 선언형 UI를 작성하는 방식으로
기존의 XML 기반 UI 작성법과는 달리 상태가 변할 때마다 리컴포지션이 일어난다는 특징이 있다

리컴포지션이 발생할 때마다 컴포넌트 내부의 변수들이 초기화되기 때문에 이전 상태값을 기억하기 위해 remember와 mutableStateOf를 사용한다

** 리컴포지션(recomposition): Compose가 상태 변경을 감지하고 해당 상태와 관련된 UI만 다시 생성하는 것

✏️ remember와 mutableStateOf의 역할

🔸 remember

• 리컴포지션이 발생해도 상태를 기억하도록 도와주는 키워드
• Compose에서 리컴포지션이 발생할 때마다 변수들이 초기화되지 않고 기존 값을 유지

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text("Clicked $count times")
    }
}

 

🔸 mutableStateOf

• 상태 변화를 Compose에 알리는 역할
• mutableStateOf로 감싼 변수는 Compose가 상태 변화를 감지하여 UI를 업데이트
• Compose의 상태 관리에서 필수적으로 사용

var count by mutableStateOf(0) // 상태 변경 가능

⚠️ Compose에서 일반 변수는 상태 변경을 감지하지 못한다 그래서 mutableStateOf를 사용해야 함!

🔹 remember와 mutableStateOf의 관계

• remember: 리컴포지션에서 상태를 기억
• mutableStateOf: Compose가 상태 변화를 감지하도록 함
  

   

❗ 둘 중 하나만 사용할 경우 문제가 발생한다

• mutableStateOf만 사용: 리컴포지션 시 값 초기화
• remember만 사용: 상태 변화를 감지하지 못해 UI 업데이트 불가

❓remember와 mutableStaeOf를 함께 사용하지 않으면?

1. mutableStateOf만 사용: 리컴포지션 발생 시 값이 초기화된다
2. remember만 사용: 상태 변화를 Compose가 감지하지 못해 UI가 업데이트되지 않는다

✏️ remember를 사용하는 세 가지 방법

🔹 기본적인 사용법

mutableStateOf와 함께 사용하는 기본적인 방식

val a = remember { mutableStateOf(default) }

a.value = 1 // .value를 직접 사용해 값을 수정

 

🔹 by 위임 연산자 사용

mutableState의 .value를 직접 사용하지 않도록 Kotlin의 위임 연산자를 사용할 수 있다

var b by remember { mutableStateOf(default) }

b = 1 // .value 없이 값에 접근 가능

 

🔹 destructuring 선언 사용

mutableStateOf의 상태와 setter를 분리해 활용할 수도 있다

val (value, setValue) = remember { mutableStateOf(default) }

setValue(1) // setValue를 호출해 값을 수정

val (count, setCount) = remember { mutableStateOf(0) }

Button(onClick = { setCount(count + 1) }) {
    Text("Clicked $count times")
}

하지만! remember로는 화면 회전 시 상태를 기억하지 못한다! 😱

remember는 기본적으로 리컴포지션이 발생할 때 상태를 유지하지만 화면 회전이나 프로세스 재생성 시
상태를 기억하지 못한다는 단점이 있다 이 문제를 해결하려면 rememberSaveable을 사용해야 한다

✏️ rememberSaveable

• 기본 remember와 유사하지만, 화면 회전이나 프로세스 재생성 시에도 상태를 유지
• 내부적으로 Bundle에 저장할 수 있는 타입만 지원

val state = rememberSaveable { mutableStateOf(0) }

 

하지만! (두번째)... 😢

rememberSaveable은 복잡한 객체나 데이터 구조를 저장할 때 문제가 발생할 수 있다 또한 화면 회전 이후 상태가 유지되긴 하지만 애플리케이션 전체 상태를 다룰 때는 여전히 불편할 수 있다

그렇기 때문에 애플리케이션 전반에 걸쳐 상태를 관리하고 화면 전환 시 상태를 유지하려면

✨ViewModel✨을 사용하는 것이 적합하다 

✏️ ViewModel과 상태 관리

• 화면 회전과 같은 구성 변경에도 상태 유지
• Compose 화면 간 상태 공유 가능
• 복잡한 로직(예: 네트워크 호출, 데이터베이스 관리)을 안전하게 처리

@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
    val state by viewModel.uiState.collectAsState()

    Text(text = "State: $state")
}

✅ 마무리

Jetpack Compose에서 remember와 mutableStateOf는 상태 관리를 위한 필수 도구이다

• remember: 상태를 기억
• mutableStateOf: 상태 변화를 감지

이 두 가지를 적절히 조합하면 효율적인 상태 관리와 UI 업데이트가 가능하고
rememberSaveable을 사용하면 구성 변경 시 상태를 유지할 수 있다!

상태 관리가 복잡해질 경우 ViewModel을 사용하면 되는데

ViewModel과 관련해서는 더 자세하게 다음 글에서 다뤄 볼 예정이다! 🚀

📌 참고 자료

• Jetpack Compose 공식 문서
• [Android] Compose 사용하기 - 1. remember와 MutableState