Android Academy · 강의

TextField와 사용자 입력

Compose에서 사용자로부터 텍스트를 입력받습니다.

TextField와 사용자 입력은(는) CoddyKit의 무료 Android Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Android Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

사용자 입력 받기

실제 앱은 거의 모두 사용자에게 무언가를 입력하도록 요청해야 합니다. 이름, 이메일, 검색어 등이 그 예입니다. Jetpack Compose에서 텍스트를 입력받는 기본 구성 요소는 TextField입니다.

이 과정에서는 텍스트 필드를 표시하고, 사용자가 입력한 내용을 읽고, 필드의 내용을 앱의 상태와 동기화하는 방법을 배웁니다. 이는 앞으로 만들 모든 양식의 기초입니다.

첫 번째 TextField

TextField에는 두 가지가 필요합니다. 표시할 현재 텍스트인 value와 사용자가 입력할 때 수행할 작업을 정의하는 onValueChange 콜백입니다.

Compose는 선언적이므로 필드가 자체 텍스트를 저장하지 않습니다. 텍스트를 상태로 보관하고 필드에 다시 전달해야 합니다. 이 패턴을 상태 끌어올리기라고 합니다.

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

    TextField(
        value = name,
        onValueChange = { name = it }
    )
}

값 순환의 작동 방식

가장 중요한 개념은 TextField가 value에 전달한 내용을 정확히 표시한다는 것입니다. 사용자가 키를 누르면 Compose는 새 텍스트와 함께 onValueChange를 호출합니다.

새 텍스트를 상태에 저장합니다.
상태가 변경되면 재구성이 실행됩니다.
업데이트된 value로 필드가 다시 그려집니다.

onValueChange 내부에서 상태를 업데이트하지 않으면 value가 바뀌지 않기 때문에 필드가 멈춘 것처럼 보입니다.

var name by remember { mutableStateOf("") }

TextField(
    value = name,
    onValueChange = { newText -> name = newText }
)

라벨과 자리 표시자 추가하기

텍스트 필드만 있으면 사용자에게 무엇을 입력해야 하는지 알려 주지 못합니다. label(필드 위로 떠오르는 라벨)과 placeholder(비어 있을 때 표시되는 안내 문구)를 추가하세요.

이런 작은 요소만으로도 양식을 훨씬 쉽게 이해할 수 있습니다.

var email by remember { mutableStateOf("") }

TextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    placeholder = { Text("you@example.com") }
)

OutlinedTextField

Material Design에는 두 가지 주요 스타일이 있습니다. TextField는 채워진 배경을 사용하고, OutlinedTextField는 필드 주위에 테두리를 그립니다. 두 구성 요소는 같은 API를 공유하므로 쉽게 전환할 수 있습니다.

외곽선 필드는 세로로 배치했을 때 깔끔하게 보여 양식에서 자주 사용됩니다.

var username by remember { mutableStateOf("") }

OutlinedTextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    singleLine = true
)

앞쪽 및 뒤쪽 아이콘

아이콘으로 필드를 꾸밀 수 있습니다. leadingIcon은 시작 부분에 표시되고(검색 아이콘이나 이메일 아이콘에 적합), trailingIcon은 끝 부분에 표시됩니다(대개 지우기 버튼으로 사용).

아이콘을 사용하면 필드의 용도를 한눈에 알 수 있습니다.

var query by remember { mutableStateOf("") }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    label = { Text("Search") },
    leadingIcon = {
        Icon(Icons.Default.Search, contentDescription = null)
    }
)

지우기 버튼

필드의 내용을 지우는 작은 "x" 버튼은 흔히 사용하는 사용자 경험 패턴입니다. 텍스트가 있을 때만 trailingIcon 슬롯과 IconButton을 사용해 표시하세요.

지우기 동작은 상태를 빈 문자열로 되돌리는 것뿐이라는 점에 주목하세요.

var text by remember { mutableStateOf("") }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Note") },
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Default.Clear, contentDescription = "Clear")
            }
        }
    }
)

한 줄과 여러 줄 비교

기본적으로 TextField는 여러 줄로 늘어날 수 있습니다. 이름이나 이메일처럼 한 줄이면 되는 항목에는 singleLine = true를 설정해 사용자가 줄 바꿈을 입력하지 못하게 하세요.

긴 메모에는 여러 줄 입력을 그대로 사용하고, 필요하면 maxLines로 높이를 제한하세요.

var bio by remember { mutableStateOf("") }

OutlinedTextField(
    value = bio,
    onValueChange = { bio = it },
    label = { Text("Bio") },
    maxLines = 4
)

입력에 실시간으로 반응하기

텍스트 상태를 직접 관리하므로 즉시 반응할 수 있습니다. 대표적인 예로 필드 아래에 실시간 글자 수를 표시하는 방법이 있습니다.

키를 누를 때마다 text가 업데이트되고, 필드와 그 아래의 글자 수가 함께 재구성됩니다.

var text by remember { mutableStateOf("") }

Column {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Tweet") }
    )
    Text("${text.length} / 280")
}

입력 변환하기

사용자가 입력한 내용을 저장하기 전에 정규화하고 싶을 때가 있습니다. onValueChange 내부에서 새 값을 먼저 변환할 수 있습니다.

여기서는 사용자 이름을 소문자로 바꾸고 공백을 제거합니다. 순환을 직접 제어하므로 필드에는 항상 정리된 버전이 표시됩니다.

var handle by remember { mutableStateOf("") }

OutlinedTextField(
    value = handle,
    onValueChange = { input ->
        handle = input.lowercase().filterNot { it.isWhitespace() }
    },
    label = { Text("Handle") },
    singleLine = true
)

순수 Kotlin: 핸들 정리하기

앞의 변환 로직은 일반 Kotlin 코드일 뿐입니다. Android 없이도 독립적으로 테스트할 수 있습니다. 여기서는 같은 정리 규칙을 독립 실행합니다.

이와 같은 로직을 순수 함수에 두면 단위 테스트를 쉽게 수행할 수 있습니다.

fun cleanHandle(input: String): String =
    input.lowercase().filterNot { it.isWhitespace() }

fun main() {
    println(cleanHandle("  John Doe "))
    println(cleanHandle("ADA Lovelace"))
}

빠른 확인

TextField의 onValueChange 콜백이 value에 전달된 상태를 전혀 업데이트하지 않으면 어떻게 될까요?

복습

이제 Compose에서 텍스트 입력의 핵심을 알게 되었습니다.

TextField와 OutlinedTextField는 value와 onValueChange 콜백을 받습니다.
remember { mutableStateOf(...) }로 텍스트를 보관하고 변경될 때마다 업데이트합니다(상태 끌어올리기).
label, placeholder, 앞쪽 및 뒤쪽 아이콘, singleLine으로 모양과 동작을 구성합니다.
상태를 직접 관리하므로 사용자가 입력하는 동안 실시간으로 반응하거나 입력을 변환할 수 있습니다.

다음 주제: 한 필드가 아닌 전체 양식의 상태 관리입니다.

자주 묻는 질문

“TextField와 사용자 입력” 강의는 무료인가요?

네 — “TextField와 사용자 입력” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Android Academy 강의 전체를 잠금 해제할 수 있습니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“TextField와 사용자 입력”에서 뭘 배우나요?

Compose에서 사용자로부터 텍스트를 입력받습니다. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Android Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Android Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“TextField와 사용자 입력” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Android Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Android Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Android Academy(으)로 돌아가기