Compose의 상태 - 호이스팅이란?

상태 호이스팅

컴포저블 함수에서 여러 함수가 읽거나 수정하는 공통의 상태는 상위 항목에 위치해야 한다.

이 과정을 상태 호이스팅이라 한다. (패턴이라할 수도 있을 것 같다!)

컴포저블의 상위 요소에서 제어할 필요가 없는 상태는 호이스팅되면 안된다.

 

예시와 함께 쉽게 설명해보자.

아래의 코드는 화면에 온보딩을 띄워주는 기능이다.

@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
fun OnboardingPreview() {
    BasicsCodelabTheme {
        OnboardingScreen()
    }
}

 

이 화면은 사용자가 처음 앱을 실행했을 때 누르는 버튼을 제공한다.

따라서 버튼을 눌렀는지, 누르지 않았는지 정보에 따라 다음 동작이 결정되어야 한다.

@Composable
fun OnboardingScreen(modifier: Modifier = Modifier) {
    // TODO: This state should be hoisted
    var shouldShowOnboarding by remember { mutableStateOf(true) }

    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Welcome to the Basics Codelab!")
        Button(
            modifier = Modifier.padding(vertical = 24.dp),
            onClick = { shouldShowOnboarding = false }
        ) {
            Text("Continue")
        }
    }
}

위 코드에서는 내부에 온보딩 버튼을 눌렀는지 여부를 표시하는 변수 shouldShowOnboarding이 있다.

하지만 함수의 내부에 이 변수가 있다면, 상위 함수에서 이 버튼이 눌러졌는지 여부를 어떻게 알 수 있을까?

 

@Composable
fun MyApp(modifier: Modifier = Modifier) {
    Surface(modifier) {
        if (shouldShowOnboarding) { // Where does this come from?
            OnboardingScreen()
        } else {
            Greetings()
        }
    }
}

알 수 있는 방법이 없어서 다음 동작을 실행할 수 없다!

 

이때 shouldShowOnboarding 변수를 상위 함수인 MyApp으로 뺀다면 변경된 상태를 활용할 수 있을 것이다.

@Composable
fun MyApp(modifier: Modifier = Modifier) {

    var shouldShowOnboarding by remember { mutableStateOf(true) }

    Surface(modifier) {
        if (shouldShowOnboarding) {
            OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false })
        } else {
            Greetings()
        }
    }
}

이렇게 공통적으로 공유해야 하는 상태 값을 상위 요소로 이동하는 것을 호이스팅한다고 말한다.

호이스팅의 장점

상태가 중복되지 않고, 버그가 발생하는 것을 방지할 수 있다.

컴포저블을 재사용할 수 있다.

쉽게 테스트할 수 있다.