SwiftUI 텍스트 필드 다루기

이번에는 SwiftUI에서 텍스트필드를 어떻게 사용하는지에 대해 알아보겠습니다. 이 강좌는 Swift 기본 문법을 숙지하고 있다는 가정 하에 작성되었습니다.

텍스트필드로부터 텍스트 읽어오기

텍스트필드는 텍스트의 입력을 읽어오기 위한 component 입니다. 우선, 텍스트필드를 사용하기 위해서는 TextField 명령어를 사용하면 되는데요. 인자 값으로 @State로 선언된 변수를 넣어주면, 이 변수에 텍스트가 입력됩니다.

struct ContentView : View {
    @State var name: String = "Hohyeon"
    var body: some View {
        VStack {
            TextField("Enter your name", text: $name)
            Text("Hello, \(name)!")
        }
    }
}

텍스트필드에 placeholder 추가

사실, placeholder은 위에서도 사용 했는데요. Textfield의 첫 번째 인자 값으로 placeholder 텍스트가 입력됩니다. 예를들어, 이와 같은 코드는 기본으로 hohyeonmoon@gmail.com을 띄워주고, 입력되는 값을 emailAddress 변수에 담아줍니다.

struct ContentView : View {
    @State var emailAddress = ""
    var body: some View {
        TextField("hohyeonmoon@gmail.com", text: $emailAddress)
    }
}

텍스트필드에 테두리 만들기

텍스트필드의 스타일을 변경하기 위해서는 textFieldStyle을 사용하면 됩니다. 특히, 텍스트필드에 테두리 스타일을 주기 위해서는 roundedBorder을 사용하면 됩니다.

TextField("Enter some text", text: $yourBindingHere)
    .textFieldStyle(.roundedBorder)

Secure 텍스트필드 사용하기

Secure Textfield는 입력되는 텍스트의 값을 보호해주기 때문에, 암호와 같은 텍스트를 입력 받을 때 사용됩니다. 기본적으로, TextField와 사용 법이 비슷합니다. SecureField 명령어를 입력하고, 첫 인자 값으로 placeholder 텍스트를, 두 번째 입력 값으로 입력 받은 텍스트를 담을 변수를 넣어주면 됩니다.

struct ContentView : View {
    @State private var password: String = ""
    var body: some View {
        VStack {
            SecureField("Enter a password", text: $password)
            Text("You entered: \(password)")
        }
    }
}

마무리

이렇게 해서 SwiftUI에서는 텍스트필드를 어떻게 다루는지에 대해 알아봤는데요. 다음에는 SwiftUI에서 리스트를 어떻게 만드는지 알아보겠습니다.

관련 글