Jetpack Compose 이해하기 (3장) - Compose의 상태 관리와 remember, mutableStateOf

Jetpack Compose 시리즈의 이전 장에서는 Composable 함수와 Recomposition의 기본 개념에 대해 알아보았습니다.

이번 장에서는 Compose에서의 상태(State) 관리와 핵심이 되는 remember, mutableStateOf 에 대해 중점적으로 다뤄보겠습니다.

 

---

 

📌 Compose에서 상태란?

Compose에서 상태(State)는 UI가 표시하는 데이터를 의미하며, 상태가 변경되면 Compose는 이를 감지하여 해당 UI를 자동으로 재구성(Recomposition)합니다.

이를 통해 최신 상태가 UI에 반영됩니다.

반응형

🎯 상태 선언 방법

Compose에서 상태를 선언하는 일반적인 방법은 remember와 mutableStateOf를 함께 사용하는 것입니다. 이를 통해 상태를 기억하고 변경 사항을 추적할 수 있습니다.

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

    Column {
        Text(text = "Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

 

위 예제에서 remember는 mutableStateOf(0)으로 생성된 상태 객체를 컴포지션에 저장하여, 재구성 시에도 상태가 유지되도록 합니다. 버튼을 클릭하면 count 값이 증가하고, Compose는 이를 감지하여 UI를 자동으로 재구성합니다.

---

 

📌 remember와 mutableStateOf의 역할

 

• mutableStateOf: 관찰 가능한 MutableState<T> 객체를 생성합니다. 이 객체의 value가 변경되면 이를 읽고 있는 Composable 함수의 재구성이 예약됩니다. 
• remember: 컴포지션 과정에서 계산된 값을 저장하여, 재구성 시에도 해당 값을 유지합니다. 이를 통해 상태가 재설정되지 않고 유지될 수 있습니다.

 

이러한 메커니즘을 통해 Compose는 상태 변화를 효율적으로 감지하고 UI를 업데이트할 수 있습니다.

---

 

📌 mutableStateOf 사용하기

Compose에서 상태를 관리하기 위한 가장 기본적인 방법은  mutableStateOf를 사용하는 것입니다. mutableStateOf를 통해 상태를 선언하고 변경할 수 있습니다.

🛠️ mutableStateOf 사용 예시

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

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

 

위 예제에서는 버튼을 클릭할 때마다 count 상태 값이 증가하고, Compose가 자동으로 UI를 갱신합니다.

 

---

 

📌 remember란?

Compose는 Recomposition 시 Composable 함수 내의 상태를 다시 생성하지 않고 유지해야 합니다. 이때 remember를 사용하여 상태를 유지할 수 있습니다.

🎯 remember의 역할

• Composable이 다시 호출될 때 상태를 유지
• 상태가 변경될 때만 UI가 갱신되도록 최적화

 

🛠️ remember 사용 예시

@Composable
fun RememberExample() {
    val name = remember { mutableStateOf("Compose") }

    Column {
        TextField(
            value = name.value,
            onValueChange = { name.value = it }
        )
        Text(text = "Hello, ${name.value}")
    }
}

 

위 예제에서 입력 필드의 내용이 변경되면 name 상태가 업데이트되고, 자동으로 UI가 갱신됩니다

 

---

📌 상태 호이스팅(State Hoisting)

 

상태 호이스팅은 상태를 해당 상태를 사용하는 Composable 함수의 상위 함수로 이동시키는 패턴입니다. 이를 통해 상태의 소유권을 명확히 하고, 여러 Composable 간에 상태를 공유할 수 있습니다.

 

@Composable
fun CounterApp() {
    var count by remember { mutableStateOf(0) }
    Counter(count = count, onIncrement = { count++ })
}

@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
    Column {
        Text(text = "Count: $count")
        Button(onClick = onIncrement) {
            Text("Increment")
        }
    }
}

 

위 예제에서 CounterApp은 상태를 소유하고 있으며, Counter Composable은 상태와 이벤트 핸들러를 매개변수로 받아 UI를 구성합니다.

이를 통해 상태 관리와 UI 로직을 분리하여 코드의 재사용성과 테스트 용이성을 높일 수 있습니다.

728x90

---

📌 rememberSaveable의 활용

remember는 컴포지션 동안 상태를 유지하지만, 화면 회전과 같은 구성 변경 시에는 상태가 유지되지 않습니다.

이러한 경우 rememberSaveable을 사용하여 상태를 저장하면 구성 변경에도 상태를 유지할 수 있습니다. 

 

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

    Column {
        Text(text = "Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

 

위 코드에서 rememberSaveable은 count 값을 저장하여 구성 변경 시에도 상태를 유지하도록 합니다.

---

 

🎉 상태 관리의 모범 사례

• 단방향 데이터 흐름(UDF): 상태는 상위에서 하위로 전달되고, 이벤트는 하위에서 상위로 전달되는 패턴을 따릅니다. 이를 통해 상태와 UI 간의 일관성을 유지할 수 있습니다.
• 상태 호이스팅: 상태를 상위 Composable로 이동시켜 상태의 소유권을 명확히 하고, 재사용성과 테스트 용이성을 높입니다.
• 구성 변경 대응: rememberSaveable을 사용하여 구성 변경 시에도 상태를 유지하도록 합니다.

이러한 패턴과 도구를 활용하여 Compose에서 효율적이고 안정적인 상태 관리를 구현할 수 있습니다.

 

참고. https://developer.android.com/develop/ui/compose/state?hl=ko