← 아카이브로 돌아가기

Development · SwiftUI

ForEach로 데이터 기반 뷰 만들기

식별 가능한 데이터를 순회하며 반복되는 뷰를 만드는 ForEach의 기본 사용법을 살펴봅니다.

Velog 원문 보기 ↗

Development 아카이브 표지

같은 모양의 뷰를 여러 번 적는 대신 데이터와 화면의 관계를 한 번만 정의할 수 있다. ForEach에서 반복 횟수만 줄 때와 배열의 각 항목을 식별할 때의 차이를 살펴봤다.

단순 반복

반복할 범위(횟수)를 지정해주고 반복할 뷰를 작성하여 원하는 만큼 뷰를 반복한다.

VStack {
	ForEach(0..<10) { index in // 반복 횟수 지정
		Text("Hi, my index is \(index)") // 반복할 뷰
	}
}

Array 활용

Array를 활용하여 반복할 횟수와 반복할 데이터를 전달한다. .indices는 컬렉션의 인덱스 범위를 나타내는 Range<Int>를 반환한다. id: \.self는 SwiftUI가 Array의 각 요소를 고유하게 식별할 수 있도록 한다.

struct ForEachStudy: View {
    
    let data: [String] = ["Hi", "Hello", "Hey"]
    
    var body: some View {
        VStack {
            ForEach(data.indices, id: \.self) { index in // Array 갯수 만큼 반복
                Text("\(index) is \(data[index])") // 반복 순서 별 Array 데이터 활용
            }
        }
    }
}
← 아카이브로 돌아가기