SwiftUI 에서 폼 작성하기

SwiftUI로 개발하는 프로젝트에서 로그인, 회원가입 부분의 뷰 개발을 맡았다. 로그인화면은 TextField, Button을 사용해서 무난하게 개발을 했지만 회원가입 폼도 동일한 방식으로 개발을 하려다가 폼 형식의 경우 더 편하게 개발할 수 있는 방법을 알게되었다.

SwiftUI 에서 Form구조체를 사용하면 자동으로 위 이미지 처럼 폼형식을 맞춰주면서 편리하게 폼 형식을 만들 수 있다. 일단 위의 이미지 처럼

• 사용자 성
• 사용자 이름
• 닉네임
• 생년월일
• 이메일
• 패스워드

정보를 담을 변수들을 지정해보자.
전부 Form 구조체의 content매개변수 내부에서 TextField, SecureField, DatePicker등으로 구현되면서 변수의 값을 실시간으로 반영하기 위해서 @State 애노테이션과 함께 선언한다.

 // 회원정보
 @State private var firstName: String = ""
 @State private var lastName: String = ""
 @State private var nickName: String = ""
 @State private var birthDate: Date = Date()
 
 // 계정정보
 @State private var email: String = ""
 @State private var firstPwd: String = ""
 @State private var secondPwd: String = ""

Form 내부에 Section 키워드를 통해서 키워드를 지정해 줄 수 있다.
Section(header:content:)를 사용하려고 했으나 이후의 iOS 버전에서 더이상 사용되지않을 예정이라고 한다. 그런데 Section(content:header:)는 있던데 그냥 매개변수의 순서만 다른거 아닌가...? 뭐가 다른지 모르겠다 ㅇㅅㅇ
어쨋든 header매개변수에는 헤더에 표시될 텍스트, content변수에는 폼을 구성할 요소들이 온다.
섹션을 회원정보와 계정정보로 나누고, 위의 요소들을

Form {
    
    Section(header: Text("회원정보")) {
        TextField("성", text: $firstName)
        TextField("이름", text: $lastName)
        TextField("닉네임", text: $nickName)
        DatePicker("생년월일", selection: $birthDate, displayedComponents: .date)
    }
    
    Section(header: Text("계정정보")) {
        TextField("이메일", text: $email)
        SecureField("패스워드", text: $firstPwd)
        SecureField("패스워드를 다시 입력하세요", text: $secondPwd)
    }

}

Textfield나 DatePicker등에서 변수의 값을 바인딩 하기위해서 변수앞에 $기호를 붙인다는 점은 폼을 작성하려는 사람이라면 알고있을 것이다.