Compose를 공부하면서 처음 선언형 UI의 특징인 상태에 대하여 처음 접하게 되었습니다.
Compose를 잘 이해하려면 상태를 명확하게 이해해야 한다. 판단해 블로그에 기록하도록 하겠습니다.

State(상태) 란?

상태는 시간에 따라 변경될 수 있는 값 입니다. 시간에 따라 변경이 될 수 있다는 말은 APP이 시간이 흐르면서 특정 이벤트가 발생했을 때 변하는 데이터를 의미합니다.

• 네트워크 연결을 설정할 수 없을 때 표시되는 스낵바
• 블로그 게시물 및 관련 댓글
• 사용자가 클릭하면 버튼에서 재생되는 물결 애니메이션
• 사용자가 이미지 위에 그릴 수 있는 스티커

공식 문서 예시를 살펴보면 와이파이가 연결이 되어 있는 상태였다가 연결이 끊어진 상태로 변하면 사용자에게 스낵바로 사용자에게 알려줘 상태가 변하면 UI가 어떻게 변하는지 보여주는 예시가 저는 가장 이해가 잘 되었던거 같습니다.

재구성

재구성은 컴포저블 함수의 계층 안에서 상태값이 변경이 되었을 때 일어나는데 상태의 변화를 감지하면 해당 상탯값의 변화에 영향을 받는 모든 함수를 재구성해 새로운 상탯값을 전달한다.
그러니깐 체크박스 예시로 들면 체크 여부에 따라서 on/off 상태에 따라 변화가 일어나서 UI를 자동으로 업데이트 되는 메커니즘입니다.

실습

@Composable
fun StatefulTextField() {

    var text by remember { mutableStateOf("") }
    
    Column {
        TextField(
            value = text,
            onValueChange = { newText ->
                text = newText
            },
            label = { Text(text = "입력") }
        )
        Text(text = "출력 : $text")
    }
}

1. 먼저 상탯값을 선언할 때는 MutableState 객체로 해당 값을 감싸줘야 합니다.
2. 상태는 재구성 과정에서 기억이 되어야 하는데 현재 상탯값을 유지하기 위해 remember 키워드를 이용한다.
3. by 위임 키워드를 통해 상태 선언을 간결하게 하여 값을 쉽게 관리할 수 있다.
4. TextField 컴포저블에서 onValueChange 함수가 사용자가 글을 입력하고 수정할 때마다 onValueChange 가 실행되어 람다 함수 매개변수를 통해 text에 저장되어 UI가 자동으로 갱신합니다.

상태 호이스팅

hoisting이란 영어사전에서 뜻을 보면 끌어 올리기, 들어올려 나르기 라는 의미를 가진다.
Compose에서 상태 호이스팅은 상태를 자식 컴포저블에서 이를 호출한 부모 컴포저블로 끌어 올린라는 의미를 가진다.
결과적으로 자식 컴포저블이 비상태 컴포저블로 만들어지면 재사용성이 향상되어 좀 더 유연하게 코딩이 가능해지고 테스트가 쉬워지는 장점이 있습니다.

실습

@Composable
fun StatelessTextField(
    text: String,
    onTextChanged: (String) -> Unit
) {
    Column {
        TextField(
            value = text,
            onValueChange = onTextChanged,
            label = { Text(text = "입력") }
        )
        Text(text = "출력 : $text")
    }
}

1. 상태가 없는 Composable 함수 만듭니다.
2. text, onTextChanged 텍스트 변경을 부모 컴포저블로 전달하기 위해 매개변수를 받습니다.

    var text by remember {
                mutableStateOf("")
            }
            StatelessTextField(
                text = text,
                onTextChanged = { newText -> text = newText })
        }

1. 상태 변수 text를 초기화 합니다.
2. 위에서 만든 부모쪽에서 사용할 자식 Composable 함수를 호출해 상태 변수 text와 onTextChanged 함수를 통해 상태를 업데이트를 UI를 자동으로 갱신합니다.

참고

https://developer.android.com/develop/ui/compose/state?hl=ko
https://moondev03.tistory.com/entry/Compose-State-Hoisting
https://kotlinworld.com/244
핵심만 골라 배우는 젯팩 컴포즈