Compose 상태

Compose에서의 상태

  컴포즈는 선언형 UI로 UI의 구성 방법을 선언해 놓은 것이다. 따라서 함수에서 데이터를 직접 UI요소에 설정하지 않고 현재 상태에 따라 UI가 구성된다. 

이 상태는 변화가 생기면 재구성(ReCompose)를 통해 화면을 업데이트 한다. 사용자의 상호작용이나 데이터의 변경 같은 이벤트가 발생할 때, Compose는 관련된 컴포저블 함수를 다시 호출하여 UI를 업데이트 한다.

 

remember & MutableState

Composable 함수는 UI를 구성하는 함수이다. 하지만 일반적인 함수와 동일하게 함수를 재실행하면 지역변수의 값은 초기화 된다. 이러면 유지하려는 상태가 없어지므로 비정상적으로 동작할 것이다. 이 때 사용하는 것이 remeber 이다.

remember는 recompostion 과정 중 컴포저블 함수 내에 값이 유지되어야 할 때 사용된다. 즉 컴포저블 함수가 다시 실행되어도 이전 값이 남아 있는 것이다.

@Composable
fun RememberTest() {
    var text by remember { mutableStateOf("") }
    //var text = ""

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Enter text") }
    )
}

상태를 저장하는 코드의 예시이다.

TextField에 입력을 하면 remember로 선언된 text를 변경하고 그 텍스트를 TextField의 value로 사용해 입력 시 텍스트가 바로 바뀌는 걸 확인할 수 있다.

어떻게 보면 당연한 코드 같지만 remeber를 빼고 선언했을 경우(주석처리 된 부분) 키보드 입력 시 텍스트 값이 바뀌지 않는 걸 확인할 수 있다.

 

remember 괄호 안에 넣은 것은 MutableState<T>이다. 이 인터페이스도 Compose에서 상태를 관리하고 사용하는데 중요하다. 쉽게 생각하면 상태의 변경을 관찰할 수 있도록 해주는 객체이다. 

@Composable
fun CounterExample() {
    val count = remember { mutableStateOf(0) }

    Button(onClick = { count.value++ }) {
        Text("Count: ${count.value}")
    }
}

mutable객체는 직접 접근하지는 못하고 .value 형식으로 읽을 수 있다.

 

kotlin의 by를 사용하면 직접 상태를 읽고 쓸 수 있다.

@Composable
fun CounterExample() {
    var count by remember { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text("Count is $count")
    }
}

단 여기서 주의할 점은 by는 var 형 변수에만 사용할 수 있다.