8. 상태 - mutableStateOf, remember (Jetpack Compose UI 코틀린 앱 개발 강의)

---

<구글이 알려주는 앱 개발 무료 강의>

[Jetpack Compose] 가이드 맵 - 전체 보기

---

8. 상태

 

이번에는 Compose에서 상태를 관리하는 방법을 알아보겠습니다. 상태를 통해 화면의 상호작용을 관리하고 UI를 업데이트할 수 있습니다.

1. 상태(State)의 개념:
   • 상태는 UI의 상호작용에 따라 변하는 값입니다. 예를 들어, 버튼의 클릭 여부, 항목의 확장 여부 등이 상태가 될 수 있습니다.
   • Compose에서는 상태를 사용하여 UI를 업데이트하고 상호작용을 처리합니다.
2. mutableStateOf 함수:
   • 상태를 생성하기 위해 mutableStateOf 함수를 사용합니다. 이 함수는 값을 갖는 상태를 생성하고, 이 값이 변경될 때마다 UI를 자동으로 업데이트합니다.
   • 예를 들어, mutableStateOf(false)를 사용하여 항목의 펼침 여부를 저장할 수 있습니다.
3. remember :
   • Compose에서 상태를 기억하기 위해 remember를 사용합니다. 이 함수를 사용하면 Compose가 상태를 추적하고 리컴포지션을 방지합니다.
   • 각 항목에 대해 개별적으로 상태를 유지하기 위해 사용됩니다.
4. 상태를 통한 UI 업데이트:
   • 상태가 변경될 때마다 UI가 자동으로 업데이트됩니다. 이는 Compose가 상태를 읽는 함수를 다시 실행하여 UI를 새로 그리기 때문입니다.
   • 예를 들어, 버튼 클릭 시 상태를 변경하고, 그에 따라 UI를 업데이트할 수 있습니다.
5. 상태 변경 처리:
   • 버튼 클릭과 같은 상호작용을 처리하기 위해 onClick 매개변수에 함수를 할당합니다.
   • 이 함수 내에서 상태를 변경하고, 변경된 상태에 따라 UI를 업데이트합니다.
6. 항목의 펼침 상태 관리:
   • 상태를 사용하여 항목의 펼침 여부를 관리할 수 있습니다. 예를 들어, 펼침 상태에 따라 추가적인 패딩을 적용하여 UI를 업데이트할 수 있습니다.

 

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    val expanded = remember { mutableStateOf(false) }
    val extraPadding = if (expanded.value) 48.dp else 0.dp
    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(
                modifier = Modifier
                    .weight(1f)
                    .padding(bottom = extraPadding)
            ) {
                Text(text = "Hello ")
                Text(text = name)
            }
            ElevatedButton(
                onClick = { expanded.value = !expanded.value }
            ) {
                Text(if (expanded.value) "Show less" else "Show more")
            }
        }
    }
}

 

 

 

---

• [Jetpack Compose] 가이드 맵으로 돌아가기