SwiftUI 텍스트 필드 다루기 (SwiftUI 강좌)

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

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

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

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

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

텍스트필드에 placeholder 추가

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

struct ContentView : View {
    @State var emailAddress = ""

    var body: some View {
        TextField("munondio@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에서 리스트를 어떻게 만드는지 알아보겠습니다. 궁금한 점은 댓글로 남겨주세요!

  1. 강좌 잘 보고 있습니다.
    스위프트UI에서 “데이터 저장 및 관리”에 대해 궁금합니다.

    예를들면, A라는 내용을 저장, B라는 내용을 저장, C라는 내용을 저장…
    추후, A/B/C/D… 내용중 B내용 수정 등
    이런 자료들에 대해 관리가 어떻게 되는지 궁금합니다.

    • 텍스트필드에 입력된 데이터에 관하여 말씀하신거라면 단순히 해당 변수들의 값을 변경해주시면 수정할 수 있습니다!

  2. (댓글)
    그럼 궁금한게… 앱을 만들고 실행하고, 값을 변경하면 해당 앱이 변경되는 것인가요?
    데이터쪽은 스위프트와 별개 부분인가요???

    • 정확히 어떤 데이터를 말씀하시는지는 모르겠지만, 위 글과 관련된 사용자가 입력하는 데이터라면 텍스트필드와 변수로 해결됩니다! 서버상의 백엔드 데이터 관리를 말씀하시는거라면 스위프트와의 연동이 필요하지만 별도의 지식도 필요하고 설명하려면 너무 방대할듯 하네요 ㅎㅎ

댓글

Please enter your comment!
Please enter your name here