Jetpack Compose의 remember와 mutableStateOf 완벽 이해하기

Jetpack Compose는 상태(State)를 중심으로 동작하는 선언형 UI 시스템입니다. 이 구조에서 remember와 mutableStateOf는 상태를 관리하는 핵심 도구로, Compose의 작동 원리를 이해하는 데 매우 중요합니다. 이 글에서는 두 개념이 각각 어떤 역할을 하고, 함께 어떻게 동작하는지를 간결하게 정리해보겠습니다.

---

✅ remember란?

remember는 Composable 함수가 재구성(Recomposition) 될 때, 이전 값을 기억해서 유지해주는 기능을 담당합니다.
Jetpack Compose에서는 상태가 변경되면 관련 Composable 함수가 다시 실행되는데, 이 과정에서 값이 초기화되지 않도록 하려면 remember가 필요합니다.

예를 들어 아래 코드를 보겠습니다:

val count = remember { mutableStateOf(0) }

• mutableStateOf(0)는 상태를 보관하는 객체를 생성합니다.
• remember { ... }는 이 객체를 컴포지션 사이에서도 유지시킵니다.

즉, 상태가 바뀌더라도 컴포지션이 다시 일어날 때 값이 유지되도록 도와주는 역할을 합니다.

---

✅ mutableStateOf란?

mutableStateOf는 Compose에서 상태 변화를 감지할 수 있도록 만들어주는 함수입니다.
해당 값이 변경되면 이를 참조하고 있는 Composable 함수가 자동으로 recomposition(재컴포지션) 됩니다.

예를 들어:

val count = mutableStateOf(0)
count.value = 1

이 경우 count.value의 값이 변경되면, 이를 참조하는 Composable 함수가 자동으로 다시 실행됩니다.
이러한 자동 반응형 구조 덕분에 Compose는 매우 선언적이고 간결한 UI 코드를 작성할 수 있습니다.

---

✅ 둘을 함께 사용하는 이유

val count = remember { mutableStateOf(0) }

위 코드는 Compose에서 상태를 다룰 때 가장 일반적인 패턴입니다.

• mutableStateOf는 값의 변화를 감지할 수 있도록 하고,
• remember는 이 상태 객체를 재구성 시에도 유지해줍니다.

결과적으로 이 조합을 사용하면 값이 변경될 때 화면이 자동으로 갱신되며, 재컴포지션이 일어나도 상태는 초기화되지 않습니다.

---

✅ 간단한 예제

@Composable
fun Counter() {
    val count = remember { mutableStateOf(0) }

    Column {
        Text("Count: ${count.value}")
        Button(onClick = { count.value++ }) {
            Text("Increase")
        }
    }
}

동작 흐름

1. 최초 컴포지션 시 count는 0으로 초기화됩니다.
2. 버튼을 클릭하면 count.value++로 값이 증가합니다.
3. 이 상태 값의 변화는 Compose에 자동으로 감지되어 Text가 다시 그려집니다.
4. remember 덕분에 count는 컴포지션이 다시 일어나도 초기화되지 않고 기존 값을 유지합니다.

---

❗ remember 없이 사용할 경우

val count = mutableStateOf(0)  // remember 없음

이렇게 작성할 경우, Composable 함수가 재구성될 때마다 count가 다시 0으로 초기화됩니다.
즉, 버튼을 눌러도 화면에 표시되는 값은 증가하지 않고 항상 0으로 돌아가게 됩니다.

---

🔚 마무리

• mutableStateOf는 상태를 선언하고, 그 값이 바뀌었을 때 Compose가 자동으로 반응하게 만듭니다.
• remember는 이 상태를 컴포지션 간에 유지시켜주는 도구입니다.

이 두 가지를 함께 사용하는 패턴은 Compose에서 가장 기본적이면서도 중요한 상태 관리 방법입니다.
Jetpack Compose를 처음 접하거나 상태 기반 UI 흐름을 명확히 이해하고 싶다면, 이 조합의 동작 원리를 꼭 숙지하시는 것이 좋습니다.

---

더 깊은 상태 관리가 필요한 경우에는 rememberSaveable, ViewModel, StateFlow 등과 함께 활용하는 방법도 있습니다. 이후 게시글에서 다뤄보겠습니다.