[SwiftUI] 입문1 - struct로 데이터 만들어 List를 활용한 첫 앱 만들기

 

0. 알 수 있는 것

 - Array를 활용해 반복되는 정보를 짧은 코드로 출력하기

 - struct를 활용한 데이터셋 만들어 활용하기

 

 

 

 

 

1. 단순한 Array의 데이터로 출력하기

 

//
//  ContentView.swift
//  MyFirstSwiftui
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        let lives: [String] = ["monkey", "cat", "snake", "dog", "bird"]
        
        List(lives, id: \.self) { life in
            Text(life)
                .bold()
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

 

2. 단순한 Array를 활용하는 것이 아니라 struct를 활용해 데이터를 정의하고 출력하기

 

identify 관련 오류가 있어 id를 추가해주었습니다.

//
//  ContentView.swift
//  MyFirstSwiftui
//

import SwiftUI

struct Person: Identifiable {
    var id = UUID()
    let name: String
}

struct ContentView: View {
    var body: some View {
        let people: [Person] = [
            Person(name:"Kim"),
            Person(name:"Lee"),
            Person(name:"Moon"),
            Person(name:"Song"),
            Person(name:"Hong")
        ]
        
        List(people) {person in
            Text(person.name)
                .bold()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

 

3. struct 데이터를 더 복잡하게 해서 출력하기

 

//
//  ContentView.swift
//  MyFirstSwiftui
//

import SwiftUI

struct Person: Identifiable {
    var id = UUID()
    let name: String
    let imageName: String
}

struct ContentView: View {
    var body: some View {
        let people: [Person] = [
            Person(name:"Kim", imageName:"heart"),
            Person(name:"Lee", imageName:"building"),
            Person(name:"Moon", imageName:"person"),
            Person(name:"Song", imageName:"newspaper"),
            Person(name:"Hong", imageName:"house")
        ]
        
        List(people) {person in
            HStack {
                Image(systemName: person.imageName)
                Text(person.name)
                    .bold()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

 

4. 일반적으로 쓰이는 다른 예시

 

더 formal한 예시 code입니다.

 

//
//  ContentView.swift
//  MyFirstSwiftui
//

import SwiftUI

// Model Set
struct Animal : Identifiable {
    var id: Int
    var name: String
    var imageName: String
    
    subscript(key: String) -> Int {
        switch key {
        case "id" :
            return id
        default :
            return 0
        }
    }
    
}



// Data 가져오기

let animals: [Animal] = [
    Animal(id:1, name:"cat", imageName:"building"),
    Animal(id:2, name:"dog", imageName:"house"),
    Animal(id:3, name:"monkey", imageName:"bolt"),
    Animal(id:4, name:"snake", imageName:"newspaper")
]



// View

struct ContentView: View {
    var body: some View {
        
        List(animals) { animal in
            HStack {
                Image(systemName: animal.imageName)
                Text(animal.name)
            }
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

 

5. subscript case default 예시

 

id를 Int로 하지 않고, String으로 한 뒤 "a", "b", "c"처럼 규칙성 있는 값을 지정해도 문제없이 identifiable한 결과를 보여줍니다.

하지만 그러지않는다면 다음과 같이 case default로 분류됩니다.

//
//  ContentView.swift
//  MyFirstSwiftui
//

import SwiftUI

// Model Set
struct Animal : Identifiable {
    var id: String
    var image: String
    
    subscript(key: String) -> String {
        switch key {
            case "id" :
                return id
            case "image" :
                return image
            default :
                return "invalid"
        }
    }
    
}



// Data 가져오기

let animals: [Animal] = [
    Animal(id:"cat", image:"building"),
    Animal(id:"dog", image:"house"),
    Animal(id:"monkey", image:"bolt"),
    Animal(id:"snake", image:"newspaper")
]



// View

struct ContentView: View {
    var body: some View {
        
        List(animals) { animal in
            HStack {
                Image(systemName: animal["image"])
                Text(animal["name"])
            }
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

 

6. .으로 key를 지정해 가져오는 방식이 아닌, key값을 직접 지정해 데이터 가져오는 방식 예시

 

데이터를 불러올 때, "image"나 "name"처럼 key값을 index로 직접 이용시에는, subscript를 함께 해주어야합니다.

이렇게 하더라도, 별도의 id가 필요합니다.

 

//
//  ContentView.swift
//  MyFirstSwiftui
//

import SwiftUI

// Model Set
struct Animal : Identifiable {
    var id: Int
    var name: String
    var image: String
    
    subscript(key: String) -> Int {
        switch key {
        case "id" :
            return id
        default:
            return 0
        }
    }
    
    subscript(key: String) -> String {
        switch key {
        case "name" :
            return name
        case "image" :
            return image
        default :
            return "invalid"
        }
    }
    
}



// Data 가져오기

let animals: [Animal] = [
    Animal(id:1, name:"cat", image:"building"),
    Animal(id:2, name:"dog", image:"house"),
    Animal(id:3, name:"monkey", image:"bolt"),
    Animal(id:4, name:"snake", image:"newspaper")
]



// View

struct ContentView: View {
    var body: some View {
        
        List(animals) { animal in
            HStack {
                Image(systemName: animal["image"])
                Text(animal["name"])
            }
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}