SwiftUI에서 많이 하는 실수 - ScrollView 안에서 LazyVStack을 사용하지 않아 성능이 나빠지는 실수

SwiftUI에서 많이 하는 실수 - ScrollView 안에서 LazyVStack을 사용하지 않아 성능이 나빠지는 실수

 

SwiftUI에서 ScrollView + VStack 조합은,
자식 View들을 처음부터 끝까지 한 번에 모두 렌더링하려고 합니다.
셀 개수가 많아지면 메모리/CPU 사용량이 폭증하여 스크롤이 심하게 끊기게 됩니다.
이를 해결하기 위해서는 LazyVStack / LazyHStack을 사용해야 합니다.

---

1. 문제 원인

• “VStack은 그냥 스택이니까 괜찮겠지”라는 가벼운 생각
• List의 최적화와 ScrollView의 차이를 잘 모름
• 셀 개수가 수백/수천 개로 늘어날 것을 예상하지 못함

---

2. 나타나는 증상

• 데이터가 조금만 많아져도 스크롤이 프리즈 수준으로 느려짐
• 메모리 사용량이 눈에 띄게 증가
• Instruments에서 View 생성/렌더 비용이 매우 크게 측정

---

3. 잘못된 코드 예시

struct BadScrollView: View {
    let items = Array(0..<1000)

    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {      // ❌ Lazy 아님
                ForEach(items, id: \.self) { i in
                    Text("Row \(i)")
                        .padding()
                }
            }
        }
    }
}

• 1000개의 Text가 한 번에 그려집니다.

---

4. 올바른 코드 예시

struct GoodScrollView: View {
    let items = Array(0..<1000)

    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading) {  // ✅ Lazy 사용
                ForEach(items, id: \.self) { i in
                    Text("Row \(i)")
                        .padding()
                }
            }
        }
    }
}

또는 섹션 구성 시:

ScrollView {
    LazyVStack(spacing: 16) {
        Section(header: Text("A")) {
            ForEach(0..<100) { Text("A \($0)") }
        }
        Section(header: Text("B")) {
            ForEach(0..<100) { Text("B \($0)") }
        }
    }
}

---

5. 정리 및 팁

• 세로 스크롤 + 많은 셀 → ScrollView + LazyVStack
• 가로 스크롤 + 많은 셀 → ScrollView(.horizontal) + LazyHStack
• 셀이 많고 셀마다 무거운 View라면, List의 셀 재사용 최적화와 LazyStack의 차이를 이해하고 선택하는 것이 중요합니다.