SwiftUI) LazyVGrid & LazyHGrid 알아보기

 

UIKit 에서는 COllectionView를 활용

그렇다면 SwiftUI에서는 어떻게 할 수 있을까?

📘 LazyVGrid & LazyHGrid

UICollectionView처럼 그리드 형태의 레이아웃을

수직(V) - 수평(H) 방향으로 스크롤 할 수 있게 해주는 컴포넌트

 

게으른(Lazy) 방식으로 화면에 보이는 셀만 그려서 성능을 높이는 방식

---

🔹 기본 코드

✅ 세로 2열 컬렉션 뷰

let columns = [GridItem(.flexible()), GridItem(.flexible())] //2열

ScrollView {
	LazyVGrid(columns: columns, spacing: 15) {
    	ForEach(0..<30) { i in
        	Rectangle()
            	.fill(Color.green)
                .frame(height: 100)
                .overlay(Text("Item (\i)")
                .foregroundColor(.white)
        }
    }
    .padding()
}

 

✅ 가로 2열 컬렉션 뷰

let rows = [GridItem(.fixed(100)), GridItem(.fixed(100))]

ScrollView(.horizontal) {
	LazyHGrid(rows: rows, spacing: 15) {
    	ForEach(0..<30) { i in
        	Rectangle()
            	.fill(Color.orange)
                .frame(width: 100)
                .overlay(Text("Item (\i)")
                .foregroundColor(.white)
        }
    }
    .padding()
}

---

🔹 LazyVGrid & LazyHGrid 기본 구성

요소	설명
columns:	[GridItem] 배열로 열의 개수와 스타일 지정
spacing:	셀 간 간격 지정 가능
alignment:	열들의 정렬 방식 지정 (.leading, .center, .trailing)

---

🔍 GridItem

SwiftUI의 LazyVGrid나 LazyHGrid에서 열(column) 또는 행(row)의 레이아웃을 정의하는 핵심 구조체

GridItem을 배열로 전달하여, 그리드의 각 열 또는 행이 어떤 크기와 정렬 방식을 가질 지 설정

 

✅ 기본 정의

struct GridItem {
	var size: GridItem.Size
    var spacing: CGFloat?
    var alignment: Alignment?
}

- size: 그리드 셀의 크기 지정 방식

- spacing: 셀 사이 간격 (선택)

- alignment: 셀 정렬 (기본 center)

 

✅GridItem.Size 종류

➡️ .fixed(100) - 고정 너비 / 높이

배열의 갯수만큼의 열이 모두 정확히 100pt로 고정되어 표시됨

let columns= [GridItem(.fixed(100)), GridItem(.fixed(100))]

 

➡️ .flexible() - 공간 균등 분할

남는 공간을 균등하게 배열의 갯수만큼 나눔

기기 크기에 따라 너비가 자동으로 조절됨

let columns = [GridItem(.flexible()), GridItem(.flexible())]

 

➡️ .adaptive(minimum:) - 반응혈 열 수

한 행에 minimum 이상의 크기를 유지하면서 가능한 많은 셀을 넣음

넓은 화면에서는 3~4열, 좁은 화면에서는 2열로 자동 조정됨

let columns = [GridItem(.adaptive(minimum: 100))]

---

🔹 LazyVGrid vs UICollectionView

항목	LazyVGrid (SwiftUI)	UICollectionView (UIKit)
코드 스타일	선언형	명령형
셀 크기	SwiftUI 레이아웃으로 조정	delegate로 크기 조정
퍼포먼스	Lazy 로딩	셀 재사용
커스터마이징	덜 세밀하지만 빠름	매우 세밀하게 제어 가능
적합한 경우	단순/중간 난이도 UI	고정밀/복잡 셀 레이아웃

---

🔹 사용하는 경우

이미지 갤러리 /카드 UI 나열 / 컬렉션 뷰 대체 / 수직 - 수평 그리드 필요 /고정 열 레이아웃

---

🔹 결과 화면

---