[Compose] State, StateHoisting

상태가 전달되는 범위는 최대한 좁혀야한다 -> StateHoisting (상태를 위로 끌어올린다)

@Composable
fun StateTest() {
    var downCase by rememberSaveable { mutableStateOf("aa") }
    var upperCase by rememberSaveable { mutableStateOf("AA") }


    Column(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = downCase,
            onValueChange = {
                if(it.isBlank()) {
                    downCase = ""
                    upperCase = ""
                    return@OutlinedTextField
                }
                downCase = it
                upperCase = downCase.uppercase()
            },
            label = {
                Text("소문자")
            }
        )

        OutlinedTextField(
            value = upperCase,
            onValueChange =  {
                upperCase = it
            },
            label = {
                Text("대문자")
            }
        )
    }
}

 

이렇게 잘 나오지만, 하위 컴포넌트는 상태에 대한 의존성을 갖게 되므로 이걸 최대한 분리하는 게 좋다고 한다

상위 컴포넌트가 상태를 가질 수 있게끔 -> 테스트가 쉬워지고, 상태를 한 곳에만 몰아둘 수 있다 

@Composable
fun StateTest() {
    var downCase by rememberSaveable { mutableStateOf("aa") }
    var upperCase by rememberSaveable { mutableStateOf("AA") }

    DownToUpperStateless(
        downCase,
        upperCase) {
        if(it.isBlank()) {
            downCase = ""
            upperCase = ""
            return@DownToUpperStateless
        }
        downCase = it
        upperCase = downCase.uppercase()
    }

}

//상태를 모르고 전혀 개입하지 X
@Composable
fun DownToUpperStateless(
    downCase: String,
    upperCase: String,
    onDownChanged: (String) -> Unit
) {
    Column(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = downCase,
            onValueChange = onDownChanged,
            label = {
                Text("소문자")
            }
        )

        OutlinedTextField(
            value = upperCase,
            onValueChange = onDownChanged,
            label = {
                Text("대문자")
            }
        )
    }
}

 

즉, UI와 상태가 분리되고, 재사용성, 테스트 용이성도 좋아진다 

후에 state를 ViewModel에서 관리하게 할 때도 쉬울 거 같아