[Kotlin][Android] Jetpack Compose를 활용한 입력값 검증 - 빈 필드 확인하기

안녕하세요 오늘은 Jetpack Compose를 사용하여 입력값 검증을 구현해보도록 하겠습니다

사용자 입력을 다루는 애플리케이션에서는 입력값 검증이 필수적입니다.

 

이를 위해 간단한 로그인 폼을 구현해보겠습니다. 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LoginAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    LoginForm()
                }
            }
        }
    }
}


@Composable
fun LoginForm() {
    var username by remember { mutableStateOf("")}
    var password by remember { mutableStateOf("") }
    var error by remember { mutableStateOf("") }

    Column (
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "로그인",
            style = MaterialTheme.typography.headlineMedium,
            modifier = Modifier.padding(bottom = 24.dp)
        )
        TextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("Username") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        TextField (
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier.fillMaxWidth()
        )
        if (error.isNotEmpty()) {
            Text(
                text = error,
                color = Color.Red,
                modifier = Modifier.padding(top = 8.dp)
            )
        }
        Spacer(modifier = Modifier.height(16.dp))
        Button(
            onClick = {
                error = if (username.isEmpty() || password.isEmpty()) {
                    "모든 필드를 입력해주세요."
                } else {
                    "로그인 성공!"
                }
            },
            modifier = Modifier.align(Alignment.End)
        ) {
            Text("로그인")
        }
    }


}

 

변수 username, password 에 사용자의 입력값을 저장합니다. 

사용자가 값을 입력 후,  버튼을 클릭했을 때 둘 중 하나라도 empty 값이라면, 경고 메시지인 "모든 필드를 입력해주세요" 를 띄웁니다 

 

Jetpack Compose 를 사용하면 UI 구성과 입력값 확인하는 로직을 한번에 구현할 수 있습니다. 

이는 UI 구현 시 XML 파일 정의하여 Java 코드에서 findViewById  등을 활용해 다시 참조 과정을 거쳐야 하는

전통적인 안드로이드 Java 개발에 비해서 훨씬 간결하고 효율적으로 구현할 수 있습니다.