Jetpack Compose에서 상태 관리하기: remember와 mutableStateOf

개요

Jetpack Compose는 Android 앱의 UI를 작성하기 위한 강력한 도구입니다. 그 중요한 부분 중 하나는 상태 관리입니다. 이 게시물에서는 Jetpack Compose에서 상태를 어떻게 관리하는지에 대해 알아보겠습니다. 특히, "remember"와 "mutableStateOf" 함수를 사용하여 상태를 관리하는 방법을 다룰 것입니다.

 

Compose Code 를 보다 보면, 아래와 같은 코드를 자주 접하는 것을 볼 수 있습니다.

val expanded = remember { mutableStateOf(false) }

 

아래 처럼 단순하게 변수를 선언해서 쓰는거랑 무슨 차이가 있는지 상세하게 알아보도록 하겠습니다.

var expanded = false

Compose 이해

 우선, 해당 내용을 상세하게 알기 위해서는 Compose 를 이해할 필요가 있습니다. 상세한 내용은 아래 구글 Compose 가이드를 통해 확인할 수 있습니다.

https://developer.android.com/develop/ui/compose/mental-model?hl=ko#recomposition

Compose 이해  |  Jetpack Compose  |  Android Developers

 

 요약하면, 

1. Compose는 비교적 간단한 원칙에 따라 UI를 렌더링합니다.
2. 구성 요소는 상태를 기반으로 UI를 그립니다.
3. 상태 변경이 발생하면 UI가 다시 그려집니다.
4. 재구성은 효율적으로 이루어집니다.

Recomposition (재구성)

Jetpack Compose에서 상태를 관리하는 것은 UI를 업데이트하고 상태가 변경될 때마다 화면을 다시 렌더링하는 데 중요합니다. Compose 앱은 구성 가능한 함수를 호출하여 데이터를 UI로 변환합니다. 데이터가 변경되면 Compose는 새 데이터로 이러한 함수를 다시 실행하여 업데이트된 UI를 만듭니다. 이를 리컴포지션이라고 합니다. 또한, Compose는 데이터가 변경된 구성요소만 다시 구성하고 영향을 받지 않는 구성요소는 다시 구성하지 않고 건너뛰도록 개별 컴포저블에서 필요한 데이터를 확인합니다.

 

즉, Composable 함수 는 자주 실행될 수 있고 순서와 관계없이 실행될 수 있으므로 코드가 실행되는 순서 또는 이 함수가 다시 구성되는 횟수에 의존해서는 안 됩니다.

@Composable
fun Greeting(name: String) {
    var expanded = false

 

 상기와 같은 코드는 expaned 변수는 Composable 이 언제든지, 호출 될 수 있으므로, 호출 될 때마다 false 로 처리되게 됩니다. 따라서, Composeable 함수 내부에서 변수를 위와 같은 일반 스타일로 작성해서는 원하는 결과를 얻을 수 없게 됩니다.

mutableStateOf

"mutableStateOf" 함수는 Jetpack Compose에서 상태를 관리하는 데 사용되는 중요한 함수 중 하나입니다. 이 함수를 사용하면 Composable 함수 내에서 변경 가능한 상태를 생성하고 해당 상태가 변경될 때 Compose가 자동으로 UI를 다시 그립니다.

@Composable
fun Greeting() {
    val expanded = mutableStateOf(false)

 

Compose 의 특징으로 해당 변수가 변경될 떄, UI가 다시 그려지는 특징이 있습니다. 바로 mutableStateOf가 변수가 변경됨을 Compose 에서 추적하도록 하고, 이 변수가 변경 될 때 마다 UI 를 변경 가능 하게 됩니다.

 

이 함수를 사용하면 Compose가 이 State를 읽는 함수를 재구성합니다.

 

즉, State 및 MutableState는 어떤 값을 보유하고 그 값이 변경될 때마다 UI 업데이트(리컴포지션)를 트리거하는 인터페이스입니다.

remember

• "remember" 함수는 Compose에서 상태를 보존하는 데 사용됩니다.
• 이 함수는 Compose가 상태를 추적하고 필요할 때마다 해당 상태를 다시 사용할 수 있도록 합니다.

@Composable
fun Greeting(...) {
    val expanded = remember { mutableStateOf(false) }

 remember 를 통해서 Comosable 함수를 호출하더라도, 함수 호출 타이밍에 해당 변수를 기본값으로 초기화 하지 않게끔 해줍니다.

mutableStateOf과 remember { mutableStateOf }

mutableStateOf과 remember { mutableStateOf }은 둘 다 상태를 관리하는 데 사용되는 Jetpack Compose의 함수입니다. 하지만 이 둘은 동작 방식과 사용 시기에 차이가 있습니다.

1. mutableStateOf(false):
   • 이 코드는 Composable 함수 내에서 상태를 생성합니다.
   • Composable 함수가 호출될 때마다 상태가 다시 생성되며, 상태가 변경될 때마다 해당 Composable 함수가 다시 호출되어 UI가 업데이트됩니다.
   • 따라서 이 방법은 Composable 함수를 호출할 때마다 상태가 초기화되므로, 상태가 함수 내에서만 유지되고 함수 외부에서는 유지되지 않습니다.
2. remember { mutableStateOf(false) }:
   • remember 함수는 Composable 함수 내에서 상태를 보존하는 데 사용됩니다.
   • 상태가 Composable 함수가 처음으로 호출될 때 생성되고, 이후에는 해당 함수가 재호출되어도 상태가 유지됩니다.
   • 따라서 이 방법은 상태가 Composable 함수 외부에서도 유지되며, 함수가 다시 호출되어도 이전 상태를 유지합니다.

즉, mutableStateOf(false)은 상태를 각 호출마다 새로 생성하고 유지하지 않는 반면, remember { mutableStateOf(false) }는 상태를 보존하고 함수가 다시 호출되어도 이전 상태를 유지합니다. 이러한 차이로 인해 상태의 지속성과 관리 시기에 차이가 있으며, 사용 시에 이러한 차이를 고려하여 적절한 방법을 선택해야 합니다.

 

일반 언어에서 함수 밖에 있는 전역변수와 함수 내에 있는 멤버 변수의 차이 정도로 이해하면 이해가 더 빠를거 같습니다.

결론

Jetpack Compose에서 상태를 관리하는 데 "remember"와 "mutableStateOf" 함수를 사용하여, UI의 상태를 추적하고 변경 사항을 적용할 수 있습니다.