[SwiftUI] SwiftUI Form

iOS 개발자라면 필수! SwiftUI Form 제대로 활용하는 법

앱 개발할 때 사용자 입력 폼이 필요할 때가 많죠? 🤔
그럴 때 SwiftUI의 Form을 활용하면 깔끔하고 직관적인 UI를 만들 수 있슴다!
근데… 그냥 Form을 쓰는 것만으로는 한계가 있쥬.
어떻게 하면 좀 더 효율적이고, 확장성 있는 Form을 만들 수 있을까?!
오늘은 SwiftUI Form의 기본 개념부터 고급 기능까지 한방에 정리해보겠슴다!

SwiftUI Form이 뭔데? 🤷‍♂️

SwiftUI에서 Form은 기본적으로 설정 화면이나 입력 폼을 만들 때 사용함다.
iOS의 설정 앱에서 볼 수 있는 섹션 구분된 리스트 스타일 UI를 쉽게 구현할 수 있음!

✔️ 코드가 간결 → 기존 UIKit보다 훨씬 짧고 쉬운 코드로 작성 가능
✔️ 자동 스타일 적용 → iOS 기본 설정 화면과 비슷한 느낌의 UI가 자동 적용됨
✔️ 입력 요소와 조합 가능 → TextField, Toggle, Picker 등과 함께 사용 가능

한마디로, 사용자 입력을 받는 화면을 간편하게 만들 수 있는 SwiftUI의 강력한 도구라 이거쥬!

---

SwiftUI Form 기본 문법 📝

import SwiftUI

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

    var body: some View {
        Form {
            Section(header: Text("사용자 정보")) {
                TextField("이름을 입력하세요", text: $name)
                Toggle("알림 받기", isOn: $isOn)
            }
        }
    }
}

✅ Form 안에서 Section을 사용하면 그룹핑 가능
✅ TextField와 Toggle 같은 입력 요소를 간편하게 배치 가능
✅ @State를 활용해 입력 값을 쉽게 관리 가능

---

SwiftUI Form에서 활용할 수 있는 다양한 UI 요소 ✨

📌 1. TextField – 텍스트 입력받기

TextField("이름을 입력하세요", text: $name)
    .textFieldStyle(RoundedBorderTextFieldStyle())

• 사용자가 텍스트를 입력할 수 있는 기본적인 입력 필드
• RoundedBorderTextFieldStyle()을 적용하면 테두리가 둥글게 변함

📌 2. Toggle – 스위치 버튼

Toggle("푸시 알림 받기", isOn: $isOn)

• ON/OFF 토글 스위치로 설정을 켜거나 끌 수 있음
• 다크 모드 지원도 자동으로 처리됨

📌 3. Picker – 선택형 입력 필드

Picker("성별", selection: $selectedGender) {
    Text("남성").tag("남성")
    Text("여성").tag("여성")
    Text("기타").tag("기타")
}
.pickerStyle(SegmentedPickerStyle())

• 여러 개의 옵션 중에서 하나를 선택할 때 유용함
• SegmentedPickerStyle()을 적용하면 탭 버튼 형태로 변환 가능

📌 4. DatePicker – 날짜 선택

DatePicker("생년월일", selection: $birthDate, displayedComponents: .date)

• 달력 UI를 활용해 날짜를 쉽게 선택 가능
• .date 옵션을 사용하면 날짜만 선택 가능하고, .hourAndMinute를 추가하면 시간도 선택 가능

---

SwiftUI Form에서 고급 기능 사용하기 🔥

🔥 1. Section을 활용한 그룹화

Form 안에서 Section을 활용하면 폼을 깔끔하게 정리할 수 있음다!

Form {
    Section(header: Text("사용자 정보")) {
        TextField("이름", text: $name)
        TextField("이메일", text: $email)
    }

    Section(header: Text("설정"), footer: Text("이 설정은 언제든 변경할 수 있습니다.")) {
        Toggle("푸시 알림", isOn: $isOn)
        Picker("테마 선택", selection: $selectedTheme) {
            Text("라이트").tag("light")
            Text("다크").tag("dark")
        }
    }
}

✅ header를 활용하면 각 섹션의 제목을 추가할 수 있음
✅ footer를 사용하면 추가 설명을 넣을 수도 있음

---

🔥 2. Form 안에서 네비게이션 적용하기 🧭

설정 화면에서 다른 화면으로 이동하는 UI도 쉽게 구현할 수 있슴다.

NavigationView {
    Form {
        Section {
            NavigationLink("프로필 설정", destination: ProfileView())
            NavigationLink("비밀번호 변경", destination: PasswordChangeView())
        }
    }
    .navigationTitle("설정")
}

✅ NavigationView 안에서 NavigationLink를 활용하면 손쉽게 다른 화면으로 이동 가능

---

SwiftUI Form에서 데이터 저장하기 💾

사용자가 입력한 데이터를 앱이 종료된 후에도 저장하려면 어떻게 해야 할까요?
@AppStorage를 활용하면 UserDefaults에 데이터 저장이 가능함다!

import SwiftUI

struct SettingsView: View {
    @AppStorage("username") private var username: String = ""

    var body: some View {
        Form {
            TextField("사용자 이름", text: $username)
        }
    }
}

✅ @AppStorage를 사용하면 간단한 설정 값 저장에 유용함
✅ 앱을 종료해도 입력했던 값이 유지됨

---

SwiftUI Form, 실전에서 활용하는 팁 🎯

✔️ 네트워크 데이터 연동
@StateObject나 @ObservedObject를 활용해서 API 데이터를 받아와 Form에 반영 가능

✔️ 에러 메시지 표시
사용자가 필수 입력값을 입력하지 않았을 때 경고 메시지를 표시하는 로직 추가 가능

✔️ UI 커스터마이징
기본 스타일에서 벗어나 디자인을 변경하려면 listRowBackground 등을 활용하면 됨

---

마무리 ✍️

SwiftUI Form, 정말 강력한 기능이 많쥬?!
초보자도 간단한 코드로 훌륭한 입력 폼을 만들 수 있고,
고급 기능까지 활용하면 완성도 높은 앱을 만들 수 있음다.