SwiftUI의 텍스트 필드 사용법: 사용자 입력 처리

SwiftUI는 혁신적인 사용자 인터페이스 프레임워크로, 선언형 문법을 사용하여 코드를 간결하고 읽기 쉽게 만드는 데 도움이 됩니다. 이 글에서는 SwiftUI의 TextField를 사용하여 사용자 입력을 처리하는 방법에 대해 설명합니다. 처음부터 끝까지 차근차근 따라가면서 기본 사용법부터 고급 활용 방법까지 이해할 수 있도록 작성되었습니다.

기본 텍스트 필드 사용법

SwiftUI에서 텍스트 필드를 사용하려면 @State 프로퍼티를 이용하여 사용자 입력을 저장할 수 있는 변수를 선언해야 합니다. 예를 들어, 사용자의 이름을 입력받는 간단한 텍스트 필드는 다음과 같이 구현할 수 있습니다.

swift
import SwiftUI

struct ContentView: View {
    @State private var name: String = ""

    var body: some View {
        VStack {
            TextField("Enter your name", text: $name)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
            Text("Hello, \(name)!")
        }
        .padding()
    }
}

위 코드에서 @State로 선언된 name 변수는 텍스트 필드에 입력된 값을 실시간으로 업데이트합니다. 사용자가 텍스트 필드에 이름을 입력하면, 아래의 텍스트가 해당 이름으로 인사말을 표시합니다.

사용자 입력 검증

사용자 입력을 검증하는 것은 많은 애플리케이션에서 중요한 작업입니다. SwiftUI에서는 다양한 검증 방법을 제공하는데, 가장 기본적인 방법은 입력 값이 특정 조건을 만족하는지 확인하는 것입니다.

아래 예제는 이메일 주소를 입력받고 유효한 형식인지 확인하는 간단한 검증 로직을 보여줍니다.

swift
struct EmailValidationView: View {
    @State private var email: String = ""
    @State private var isValid: Bool = true

    var body: some View {
        VStack {
            TextField("Enter your email", text: $email)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .onChange(of: email) { newValue in
                    isValid = isValidEmail(newValue)
                }
            Text(isValid ? "Valid email" : "Invalid email")
                .foregroundColor(isValid ? .green : .red)
        }
        .padding()
    }

    func isValidEmail(_ email: String) -> Bool {
        // 정규식을 사용한 이메일 검증
        let emailRegEx = ".+@.+\..+"
        let emailTest = NSPredicate(format:"SELF MATCHES %@", emailRegEx)
        return emailTest.evaluate(with: email)
    }
}

이 예제에서는 onChange(of:) 메서드를 사용하여 이메일 입력 필드의 값이 변경될 때마다 검증을 수행합니다. 정규식을 사용하여 유효한 이메일 형식인지 확인하고, 결과에 따라 텍스트의 색상을 변경합니다.

사용자 입력 포맷팅

특정 형식으로 입력을 받거나 포맷팅하는 경우가 있습니다. 예를 들어, 전화번호나 날짜를 입력받을 때는 특정 포맷이 필요합니다. 아래 예제에서는 전화번호를 포맷팅하는 방법을 보여줍니다.

swift
struct PhoneNumberFormatterView: View {
    @State private var phoneNumber: String = ""

    var body: some View {
        VStack {
            TextField("Enter your phone number", text: $phoneNumber)
                .keyboardType(.numberPad)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .onChange(of: phoneNumber) { newValue in
                    phoneNumber = formatPhoneNumber(newValue)
                }
            Text("Formatted: \(phoneNumber)")
        }
        .padding()
    }

    func formatPhoneNumber(_ number: String) -> String {
        let cleanedNumber = number.filter { $0.isNumber }
        let formatter = NumberFormatter()
        formatter.numberStyle = .none
        let numberAsNSNumber = NSNumber(value: Int(cleanedNumber) ?? 0)

        return formatter.string(from: numberAsNSNumber) ?? number
    }
}

위 코드에서는 전화번호 입력 시 숫자만 남기고 특정 형식으로 변환합니다. onChange(of:) 메서드를 사용하여 입력 값이 변경될 때마다 포맷팅을 적용합니다.

마무리

SwiftUI의 TextField는 강력하고 유연한 사용자 입력 도구로, 기본 사용법부터 고급 기능까지 다양한 방식으로 활용할 수 있습니다. 텍스트 필드를 사용하여 사용자 입력을 받고 이를 검증하고 포맷팅하는 방법을 이해하고 나면, 더 복잡한 입력 폼을 제작하는 데 크게 도움이 될 것입니다. 다양한 예제를 통해 직접 구현해보고, 앱 개발에 적용해 보세요.