[iOS/SwiftUI] V,HStack 과 LazyVStack 차이

SwiftUI의 LazyVStack은 화면에 보이지 않는 컨텐츠를 로드하지 않고 효율적으로 스크롤 가능한 세로 뷰를 구현하는 데 사용된다.

 

VStack과 비슷하지만, LazyVStack은 필요한 경우에만 뷰를 생성하기 때문에 매우 큰 데이터 세트를 처리하는 데 유용하다.

즉, LazyVStack은 매우 큰 데이터 세트가있는 경우 성능 문제를 해결하기 위해 사용된다.

 

이 컴포넌트는 데이터가 화면에 보이는 경우에만 필요한 뷰를 생성하기 때문에, 화면에 보이지 않는 데이터는 로드되지 않아 성능이 향상된다. 또한, 스크롤 할 때마다 새로운 셀을 생성하기 때문에 메모리를 효율적으로 사용할 수 있다.

 

1...10000개의 데이터를 불러올때의 View를 그리는 시간 차이 예시이다.

왼쪽 VStack은 10000개의 데이터를 한번에 그리느라 시간과 메모리를 약 5배 더 사용한다.

반면 오른쪽 LazyVStack은 37개의 데이터를 불러와서 View를 그리고 Scroll시 추가해서 View를 그려준다.

struct LazyVStackPage: View {
    var body: some View {
        ScrollView(){
            LazyVStack(alignment: .center){
                ForEach(1...10000, id: \.self){
                    Text("Row\($0)")
                }
            }
            
        }
    }
}

 

VStack, LazyVStack