Compose(Recomposition/rememeber/state hoisting)

Recomposition

• Composable함수의 parameter 값이 바뀌면 해당 함수로 그리는 내용을 전부 다시 구성하는 것
• 해당 Composable함수에 대해서만 재구성이 이루어 진다.

단계

1. Composition
2. Layout
3. Draw

---

remember

• composable 함수의 내용이 바뀌면 그 부분만 수정되는 것이 아니라 해당 Composable함수 전체적으로 재구성된다.(recomposition)
• composable이 업데이트 되려면 새 상태를 명시적으로 알려야 한다.
• 그 때 변하는 데이터를 기억하기 위한 것
• remember를 사용해 메모리에 객체를 저장한다.
• 함수의 인자로 값을 받으면 val 타입이기 때문에 수정이 안되고
• Composable함수가 activity class 밖에서 정의되기 때문에 전역변수로 변하는 값을 관리할 수도 없다.

@Composable
fun SimpleCounterBtn(){

    var count by remember { mutableStateOf(5) }
    // var count = 5 함수가 실행(recomposition)될 때마다 초기화되기 때문에 의미가 없다.

    Button(onClick = {
        count++
    },
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "count = $count",
            fontSize = 50.sp
        )
    }
}

 

---

State Hoisting

• state(Composable 함수에서 사용되는 변수의 값)을 stateless한 상태로 만드는 것
  • 변수 예시 : 위젯에서 표시할 문자, callback 함수
  • 함수 내부에서 관리되면 statefull
  • 함수의 인자로 받아서 외부에서 관리되면 stateless
• stateless 상태일 때 재사용성이 높아진다.

@Composable
fun HelloScreen(){
    var name by rememberSaveable {
        mutableStateOf("")
    }

    HelloContent(name = name, onNameChange = {name = it})

}

@Composable
fun HelloContent(name: String, onNameChange: (String) -> Unit){
    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "hello, $name",
            modifier = Modifier.padding(bottom = 8.dp),
            style = MaterialTheme.typography.headlineMedium
        )
        OutlinedTextField(
            value = name,
            onValueChange = onNameChange,
            label = {Text("name")}
            )
    }
}