State Hoisting(상태 호이스팅)

hoisting이란 외부로 선언을 끌어올리는 것

State Hoisting

컴포즈에서 상태 호이스팅은 컴포저블을 Stateless로 만들기 위해 State를 호출자로 옮기는 패턴입니다. 자바스크립트의 호이스팅과는 사뭇 다른 개념입니다. 자바스크립트에선 현상이지만 컴포즈에선 패턴입니다.

컴포즈에서 상태 호이스팅을 하는 일반적인 패턴은 컴포저블 내부에서 선언한 State를 다음 두 개의 매개변수로 바꾸는 것입니다.

• value: T = 표시할 현재 값
• onValueChange: (T) -> Unit = T가 제안된 새 값일 경우 값을 변경하도록 요청하는 이벤트

꼭 onValueChange로 제한되진 않습니다. 컴포저블에서 더 구체적인 이벤트가 필요하다면 람다를 사용하여 이벤트를 정의하면 됩니다.

장점

• 단일 정보 소스 : State를 복제하는 대신 매개변수로 옮겼기 때문에 소스가 하나만 있습니다. 따라서 버그 방지에 도움이 됩니다.
• 캡슐화됨 : Stateful 컴포저블(넘기는 놈)만 상태를 수정할 수 있습니다. 철저히 내부적 속성입니다.
• 공유 가능 : 호이스팅을 하게 되면 한 State를 여러 컴포저블과 공유할 수 있습니다. 다른 컴포저블에서 name를 읽으려는 경우 호이스팅을 했기 때문에 넘기기만 하면 됩니다.
• 가로채기 가능 : Stateless 컴포저블의 호출자는 상태를 변경하기 전, 이벤트를 무시할지 수정할지 결정할 수 있습니다.
• 분리됨 : Stateless컴포저블의 상태는 어디에나 저장할 수 있습니다. viewModel로도 이동시킬 수 있습니다.

예제

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

    Greeting(name = name) {
        name = it
    }
}

@Composable
fun Greeting(name: String, onValueChanged: (String) -> Unit) {
    Column(modifier = Modifier.padding(16.dp)) {
        if(name.isNotEmpty())
            Text(
                text = "Hello! $name",
                modifier = Modifier.padding(bottom = 8.dp),
                style = MaterialTheme.typography.bodyMedium
            )
        OutlinedTextField(
            value = name,
            onValueChange = onValueChanged,
            label = { Text("Name")}
        )
    }
}

내부에서 사용하던 name을 GreetingScreen에서 넘겨주는 방식으로 변경하였습니다
Greeting에서 상태를 끌어올리면 재활용 및 테스트하기 편리합니다. 또한 Greeting는 State와 저장 방식이 분리 됐다고 할 수 있습니다. Greeting에서 State를 쓰고 있지만 GreetingScreen에 State가 저장돼 있다는 의미입니다. 따라서 GreetingScreen의 State를 수정하거나 교체해도 Greeting을 수정할 필요가 없습니다

데이터 흐름

State가 내려가고 이벤트가 올라가는 패턴을 단방향 데이터 흐름이라고 합니다. 제가 작성한 예시를 예로 들면 GreetingScreen에서 Greeting으로 State가 내려가고 Greeting에서 GreetingScreen으로 이벤트를 올립니다.

참고

상태 및 Jetpack Compose  |  Android Developers