SwiftUI

 

 Rectangle()
     .opacity(0.001)
     .overlay(
         WebImage(url: URL(string: urlString))
             .resizable()
             .indicator(.activity)
             .aspectRatio(contentMode: .fill)
         )

 

Rectangle()

: 해당 뷰를 포함하는 프레임 내부에 정렬된 직사각형 모양

https://developer.apple.com/documentation/swiftui/rectangle

Rectangle | Apple Developer Documentation

 

.overlay()

: 뷰 앞에 레이어를 배치

https://developer.apple.com/documentation/swiftui/view/overlay(_:alignment:)

overlay(_:alignment:) | Apple Developer Documentation

 

.resizable()

: SwiftUI가 이미지의 크기를 공간에 맞게 조절하는 모드를 설정

https://developer.apple.com/documentation/swiftui/image/resizable(capinsets:resizingmode:)

resizable(capInsets:resizingMode:) | Apple Developer Documentation

 

 

import SwiftUI
import SDWebImageSwiftUI

struct ImageLoaderView: View {
    
    var urlString: String = Constants.randomImage
    
    var body: some View {
        Rectangle()
            .opacity(0.001)
            .overlay(
                WebImage(url: URL(string: urlString))
                    .resizable()
                    .indicator(.activity)
                    .aspectRatio(contentMode: .fill)
            )
    }
}

#Preview {
    ImageLoaderView()
        .cornerRadius(30)
        .padding(40)
        .padding(.vertical, 60)
}

 

오잉 vertical은 왜 안 맞지.. 해서 검색해 보니

iPhone의 상단 노치와 하단 홈 인디케이터를 고려하지 않고 패딩을 적용하면,

Safe Area 바깥 영역이 여백에 포함될 수 있기 때문이라고 헙니다

---

 

allowsHitTesting()

: 이 뷰가 히트 테스트 작업에 참여하는지 여부를 구성
(즉, 클릭 비활성화? -> 사용자의 터치, 클릭, 제스처 등의 입력이 뷰에 전달되는지를 결정)

https://developer.apple.com/documentation/swiftui/view/allowshittesting(_:)

allowsHitTesting(_:) | Apple Developer Documentation

 

---

 

비동기 요청

 

- 더미 데이터 받아오는 곳

https://dummyjson.com/

DummyJSON - Fake REST API of JSON data for development

 

- Json 파일 swift에서 사용할 수 있게 만들어주깅

https://quicktype.io/

Convert JSON to Swift, C#, TypeScript, Objective-C, Go, Java, C++ and more<!-- --> • quicktype

 

import Foundation

struct ProductArray: Codable {
    let products: [Product]
    let total, skip, limit: Int
}

struct Product: Codable, Identifiable {
    let id: Int
    let title, description: String
    let price, discountPercentage, rating: Double
    let stock: Int
    let tags: [String]
    let brand: String?
    let weight: Int
    let warrantyInformation, shippingInformation: String
    let images: [String]
    let thumbnail: String
}

 

import Foundation

struct DatabaseHelper {
    func getProducts() async throws -> [Product] {
        guard let url = URL(string: "https://dummyjson.com/products") else {
            throw URLError(.badURL)
        }
        
        let (data, _) = try await URLSession.shared.data(from: url)
        let products = try JSONDecoder().decode(ProductArray.self, from: data)
        return products.products
    }
}

 

import SwiftUI

struct ContentView: View {
    @State private var users: [User] = []
    @State private var products: [Product] = []
    
    var body: some View {
        ScrollView {
            VStack {
                ForEach(products) { products in
                    Text(products.title)
                }
            }
        }
        .padding()
        .task {
            await getData()
        }
    }
    
    private func getData() async {
        do {
            try await users = DatabaseHelper().getUsers()
            try await products = DatabaseHelper().getProducts()
        } catch {
            
        }
    }
}

#Preview {
    ContentView()
}

 

 

@State

: SwiftUI에서 사용되는 특수 속성 래퍼(Property Wrapper)

 

' 뷰의 상태를 관리하기 위해 사용됩니다. 이 속성을 사용하면 뷰의 상태가 변경될 때마다 뷰가 자동으로 업데이트됩니다.

구체적으로, @State는 뷰 내에서 로컬 상태를 선언하고, 이 상태가 변경되면 SwiftUI가 해당 뷰를 다시 렌더링 하도록 만듭니다. '

 

' @State는 SwiftUI에서 상태 관리의 기본적인 방식으로, 작은 규모의 상태를 관리하는 데 주로 사용됩니다. 더 큰 규모의 상태 관리가 필요할 때는 @StateObject, @ObservedObject, @EnvironmentObject 등의 다른 속성 래퍼를 사용할 수 있습니다. '