[Jetpack Compose] 7. TextField, 구조 분해

아래 영상을 보고 정리한 게시글입니다.

https://www.youtube.com/watch?v=0Udm6oKFj-o&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=6 

---

TextField

입력을 받을 수 있음

기존의 editText와 유사함

 

속성

• value : 내가 입력한 값으로 String이 들어감
• onValueChange : value가 바뀔 때 호출되는 함수

@Preview(showBackground = true)
@Composable
fun TestView() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        TextField(
						value = "",
            onValueChange = {},
        )
        Button(onClick = { }) {
            Text("클릭!!")
        }
    }
}

---

하지만 이렇게해도 키보드로 입력한 값이 TextField에 반영되지 않음

value가 ""이라서 입력을 아무리해도 그대로 ""이라 티가 안남

---

방법 1. mutableStateOf

value에 값이 바뀌는 변수를 집어넣어줘야 함

composable에 들어가는 변수는 remember + stateOf로 사용함

@Preview(showBackground = true)
@Composable
fun TestView() {
    val textValue = remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        TextField(
            value = textValue.value,
            onValueChange = {
                textValue.value = it
            },
        )
        Button(onClick = { }) {
            Text("클릭!!")
        }
    }
}

---

방법 2. 구조 분해

아래와 같이 구현하고 MutableState의 구현체를 보자

(컨트롤 + 마우스 클릭)

val v : MutableState<String> = remember {
    mutableStateOf("")
}

 

이렇게 나온다 (많이 축약해서 들고옴)

@Stable
interface MutableState<T> : State<T> {
    override var value: T
    operator fun component1(): T
    operator fun component2(): (T) -> Unit
}

component1은 value를 반환

component2는 setter function이다

 

그래서 아래와 같이 2개의 component를 반환받을 수 있음

val (text, setValue) = remember {
    mutableStateOf("")
}

 

그래서 아래와 같이 구현 가능

@Preview(showBackground = true)
@Composable
fun TestView() {
    val (text, setValue) = remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        TextField(
            value = text,
            onValueChange = setValue,
        )
        Button(onClick = { }) {
            Text("클릭!!")
        }
    }
}

---

결과물