(기초) 1-6. State와 Recomposition 이해

https://eastpark.tistory.com/9

 

1. State(상태)

상태란 Compose가 관찰하는 값이다 (예: MutableState<T>). 사용자가 입력하는 값이나, 데이터베이스에서 가져온 값 같은 것들이 모두 상태가 될 수 있다. 상태를 읽는 Composable은 상태가 바뀌면 재구성(recompose) 대상이 된다. 

 

2. Recomposition (재구성) : 

상태 변화로 인해 해당 상태를 읽은 Composable 함수만 다시 실행되는 과정이다. 

전체 UI를 다시 그리지 않고 해당하는 UI만 다시 그려진다. 

• Composition : 처음 Composable 함수를 호출해 UI 트리를 구성하는 과정.
• Recomposition : State(상태) 변화에 따라, 필요한 곳만 다시 호출해 UI 트리를 갱신하는 과정

3. 예제

@Composable
fun ParentExample() {
    var count by remember { mutableStateOf(0) }
    var text by remember { mutableStateOf("hi") }

    Column {
        RecomposeLogger("Parent")
        ChildCount(count)
        ChildStatic(text)
        Button(onClick = { count++ }) { Text("Increment count") }
        Button(onClick = { text = text + "!" }) { Text("Change text") }
    }
}

@Composable
fun ChildCount(count: Int) {
    RecomposeLogger("ChildCount")
    Text("Count: $count")
}

@Composable
fun ChildStatic(text: String) {
    RecomposeLogger("ChildStatic")
    Text("Text: $text")
}

• count를 변경하면 ChildCount 부분만 재구성된다.
• text가 변경되면 ChildStatic이 바뀔 때만 재구성 된다.