State ( 상태 ) ?

• state(상태) 는 UI가 반응하는 데이터 ( 화면에 보여지는 값 )
• Jetpack Compose는 상태 기반 UI 프레임워크, 상태가 바뀌면 자동으로 다시 Recomposition

var name by remember { mutableStateOf("홍길동") }
Text("안녕하세요, $name님!")

=> 상태가 바뀌면 Jetcompose는 자동으로 화면을 다시 그림

• JetpackCompose는 선언형 UI 방식
• 선언형 UI : 결과 중심으로 UI를 구성하는 방식

상태 선언 방식

기본 선언

var count by remember { mutableStateOf(0)}

• mutableStateOf : Compose에서 관찰 가능한 상태 객체 생성
• remember : 컴포저블이 다시 그려질 때 값을 기억
• by : .value 없이 변수처럼 사용 가능

저장 가능 상태 ( rememberSaveable )

• 화면 회전 등 구성 변경에도 유지해야 할 값은 rememberSaveable 사용

var name by rememberSaveable { mutableStateOf("") }

UI 업데이트 흐름

[ 상태값 ] -> [ UI 구성 ] -> [ 사용자 동작 ] -> [ 상태 변경 ] -> 다시 UI 구성

@Composable
fun Greeting() {
    var name by remember { mutableStateOf("") }

    Column {
        TextField(
            value = name,
            onValueChange = { name = it }
        )
        Text("안녕하세요, $name 님!")
    }
}

• 사용자가 TextField 에 이름을 입력하면 -> onValueChange 가 호출
• name = it -> 상태 값이 바뀜
• Compose가 이 상태를 보고 -> Text("안녕하세요, $name 님!") 를 다시 그림

상태 호이스팅 ( State Hoisting )

• 상태를 하위가 아닌 상위 컴포넌트에서 관리하는 패턴

컴포넌트 내부에서 관리

@Composable
fun MyTextField() {
    var text by remember { mutableStateOf("") }
    TextField(value = text, onValueChange = { text = it })
}

• 텍스트 값을 다른 컴포넌트에서 사용할 수 없음
• 그래서 상태를 상위 컴포넌트를 끌어올려서 외부에서 상태를 전달하도록 하는 것

상위에서 상태를 관리하는 방식 ( 호이스팅 )

@Composable
fun MyTextField(text: String, onTextChange: (String) -> Unit) {
    TextField(value = text, onValueChange = onTextChange)
}

@Composable
fun Parent() {
    var text by remember { mutableStateOf("") }
    MyTextField(text = text, onTextChange = { text = it })
}

이 구조의 장점

• Parent()에서 text 상태를 직접 컨트롤 가능
• 여러 컴포넌트가 같은 상태를 공유할 수 있음
• 유지보수 및 테스트가 쉬움