[Android] Compose remember 간단 요약

Compose를 사용하면서 만나게되는 remember는 데이터의 상태를 저장하고 재사용할 수 있도록 해주는 함수다.

remember를 활용하여 데이터의 상태를 유지하면 얻게되는 이점은 아래와 같다.

1. 상태 유지: Compose에서 remember는 컴포저블 함수가 재구성될 때도 현재 상태를 유지하도록 해준다. 즉, UI가 다시 그려지더라도 상태가 유지되도록 합니다.

2. 효율적인 컴포저블 재사용: remember를 사용하여 값이나 객체를 저장하면, Compose는 이 값을 다시 계산하지 않고 저장된 값을 재사용한다. 즉 불필요한 재계산을 피하고 성능을 개선할 수 있다.

3. State 객체 생성: remember는 remember와 mutableStateOf를 함께 사용하여 상태를 만들고 이를 컴포저블 함수에서 사용할 수 있다.

예시로 remember와 mutableStateOf를 사용하여 버튼 클릭 시 카운터를 증가시키는 간단한 예제를 만들어보자.

@Composable
fun CounterApp() {
    // remember와 mutableStateOf를 사용하여 상태를 저장
    var count by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Count: $count", style = MaterialTheme.typography.titleLarge)

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewCounterApp() {
    MaterialTheme {
        Surface {
            CounterApp()
        }
    }
}

 

위 코드에서 주요한 부분은 아래와 같다.

remember: 상태를 메모리에 저장하여 컴포저블이 재구성될 때도 상태를 유지한다.

mutableStateOf: 상태를 생성하고 이 상태를 변경할 수 있다. mutableStateOf와 함께 사용하면 remember가 상태를 기억합니다.

by 키워드: mutableStateOf를 사용하여 상태를 생성할 때 by 키워드를 사용하여 상태를 더 쉽게 다룰 수 있다. 꼭 by를 사용하지 않아도 상태를 생성하는 방법은 여러가지가 있다.

 

remember는 메모리에 상태를 저장하므로, 컴포저블이 재구성될 때 상태가 유지되지만, 화면 회전이나 구성 변경 시 상태는 유지되지 않는다.
이러한 문제점을 보완하기 위해 rememberSaveable로 사용하는것을 고려해 볼 수 있다. 
rememberSaveable은 화면 회전과 같은 구성 변경 시에도 상태를 유지할 수 있도록 remember와 Saver를 활용하여 상태를 저장하고 복원한다.

@Composable
fun SaveableCounterApp() {
    // rememberSaveable을 사용하여 상태를 저장하고 구성 변경 시에도 유지
    var count by rememberSaveable { mutableStateOf(0) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Count: $count", style = MaterialTheme.typography.titleLarge)

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}