100 days of swiftui: 53

@Binding

bind의 뜻은 묶다라는 의미로, swift에서는 데이터를 엮는 것이라고 표현할 수 있다. 예시로 MainView와 DetailView에서 동일한 데이터를 사용하고, DetailView에서 데이터를 수정한다고 하자. 그러면 MainView의 같은 데이터를 어떻게 DetailView와 함께 업데이트할 수 있을까? 이때 @Binding을 사용하면 된다.

예: ContentView, CustomButton이라는 View에서는 동일한 데이터(넘겨주고 넘겨받는) isYes를 활용한다. 그리고 CustomButton에서 버튼을 눌러 값을 변경하면 ContentView의 isYes 값도 동일하게 설정된다.

struct CustomButton: View {
    @Binding var isYes: Bool
    var body: some View {
        Button("Yes or No") {
            isYes.toggle()
        }
        .buttonStyle(.borderedProminent)
    }
}

struct ContentView: View {
    @State private var isYes = false
    var body: some View {
        Text(isYes ? "Yes!" : "No...")
        CustomButton(isYes: $isYes)
    }
}

깃헙 링크

TextEditor, TextField

텍스트를 입력받는 View로 TextEditor, TextField를 모두 활용할 수 있다.

TextEditor

struct ContentView: View {
    @AppStorage("notes") private var notes = ""
    var body: some View {
        NavigationStack {
            TextEditor(text: $notes)
                .navigationTitle("Notes")
                .padding()
        }
    }
}

TextField

struct ContentView: View {
    @AppStorage("notes") private var notes = ""
    var body: some View {
        NavigationStack {
            TextField("Note", text: $notes, axis: .vertical)
                .textFieldStyle(.roundedBorder)
                .navigationTitle("Notes")
                .padding()
        }
    }
}

깃헙 링크

SwiftData

강의에서 짧게 SwiftData를 활용하고 설명했는데, 기억나는 대로 기록한다.

SwiftData는 swift가 사용할 수 있는 Data Base 중 하나로, 디바이스의 저장 용량을 사용한다.

SwiftData를 활용한 예시로 학생들의 이름을 랜덤으로 생성하여 저장하고 List에 보여주는 앱은 이렇게 만들 수 있다.

Student.swift 생성하여 Student 모델 설정하기

import Foundation
import SwiftData

@Model
class Student {
    var id: UUID
    var name: String
    init(id: UUID, name: String) {
        self.id = id
        self.name = name
    }
}

💡 @Model은 @Observable과 동일한 의미이면서, 이 모델을 저장하고 수정하고 지우고 등등을 할 것이라는 정보를 내포한다.

modelContainer modifier에 Student 추가하기

import SwiftUI
import SwiftData

@main
struct BookwormApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .modelContainer(for: Student.self)
    }
}

💡 modelContainer는 SwiftData가 데이터를 저장하는 파일의 이름이라고 한다. 처음엔 파일을 생성하고 나중엔 기존의 파일을 불러온다고 한다.

@Environment, @Query 설정하기

import SwiftData

struct ContentView: View {
    @Environment(\.modelContext) var modelContext
    @Query var students: [Student]
    var body: some View {
    // ...

💡 @Query로 설정함으로써 modelContainer에서 students를 불러오고, 여기에 접근하기 위해 modelContext를 만들어야 한다.

새로 생성된 학생을 students에 저장하기

마지막으로 새로운 학생 인스턴스를 생성하고 이를 modelContext에 저장하면 된다.

                    modelContext.insert(student)

깃헙 링크

완성물