상태 관리의 중요성

상태(state)는 UI의 현재 모습을 결정하는 데이터입니다. 사용자의 상호작용에 따라 상태가 변경되면, Compose는 이를 감지하고 UI를 업데이트합니다. 이러한 방식으로 상태와 UI가 항상 일관성을 유지할 수 있습니다.

현대 프론트엔드 개발은 상태와의 싸움이라 할 수 있습니다. 웹 개발을 했다면 들어봤을 리액트, 뷰와 같은 라이브러리들은 모두 상태를 관리하고 렌더링을 어떻게 유연하게 할 수 있을까?라는 고민에서 탄생한 라이브러리입니다.

mutableStateOf는 Jetpack Compose에서 상태를 관리하기 위해 제공하는 함수입니다. 이 함수는 상태를 읽고 쓸 수 있는 MutableState 객체를 반환합니다. 상태가 변경될 때마다 Compose는 이를 감지하고 관련 UI를 다시 컴포즈(recompose)합니다.

mutableStateOf 사용법

mutableStateOf를 사용하여 상태를 관리하는 기본적인 방법을 알아보겠습니다.

1. 상태 변수 선언

상태 변수는 mutableStateOf 함수를 사용하여 선언합니다. 예를 들어, 텍스트 필드의 입력 값을 상태로 관리하고자 할 때 다음과 같이 선언할 수 있습니다.

var text by remember { mutableStateOf("") }

• remember: Compose에서 상태를 기억하도록 하는 함수입니다. 컴포저블이 다시 컴포즈될 때 상태가 초기화되지 않도록 합니다.
• mutableStateOf(""): 초기 값이 빈 문자열인 상태를 생성합니다.

2. 상태를 사용하는 UI 컴포넌트

이제 선언한 상태 변수를 UI 컴포넌트에서 사용해보겠습니다. TextField 컴포넌트를 사용하여 사용자 입력을 관리하는 예제입니다.

@Composable
fun TextFieldExample() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { newText -> text = newText },
        label = { Text("Enter text") }
    )
}

• TextField의 value 속성에 상태 변수 text를 할당합니다.
• onValueChange 콜백에서 새로운 입력 값을 상태 변수에 저장합니다. 이로 인해 상태가 변경되면 TextField가 다시 컴포즈되어 최신 값을 반영합니다.

3. 상태 변화를 반영하는 UI 업데이트

상태가 변경될 때마다 Compose는 이를 감지하고 관련된 UI를 자동으로 업데이트합니다. 예를 들어, 버튼을 클릭할 때 상태를 변경하는 예제를 보겠습니다.

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

    Column {
        Text("You have clicked the button $count times")
        Button(onClick = { count++ }) {
            Text("Click me")
        }
    }
}