[iOS/SwiftUI] VStack과 LazyVStack의 차이

 

SwiftUI에서 Stack을 사용할때 일반적인 VStack, HStack을 사용하기도 하며,

Lazy라는 키워드가 붙은 LazyVStack, LazyHStack을 사용하기도 한다.

 

이번 글에서는 이 둘의 ScrollView 내부에서의 차이와, 메모리 관점에서의 차이에 대해 알아보도록 하겠다.

 

---

ScrollView 내부에서의 차이

VStack으로 다음과 같은 뷰를 구성했을때와, LazyVStack으로 구성했을 때 

가장 먼저 느껴지는 차이는 "스크롤이 되는 영역"이 다르다는 것이다.

struct Row: View {
    let id: Int
    
    var body: some View {
        Text("Row \(id)")
    }
    
    init(id: Int) {
        self.id = id
        print("Row \(id) init")
    }
}

struct VStackView: View {
    var body: some View {
        
        ScrollView {
            VStack {
                ForEach(1...100, id: \.self, content: Row.init)
            }
        }
    }
}

struct LazyVStackView: View {
    var body: some View {
        
        ScrollView {
            LazyVStack {
                ForEach(1...100, id: \.self, content: Row.init)
            }
        }
    }
}

 

VStack의 경우 `Text("Row \(id)")` 영역 외에서는 스크롤이 되지 않지만, 

LazyVStack의 경우 Text영역 외의 빈 부분에서도 스크롤이 된다.

 

조금 더 알아보기 쉽게 Background컬러를 주면 다음과 같다.

VStack vs LazyVStack

 

 

즉, 각 VStack과 LazyVStack이 차지하는 영역이 차이가 있음을 알 수 있다.

이런 차이가 생기는 이유는 다음과 같다.

 

• VStack은 기본적으로 자식 뷰의 크기에 맞춰서 크기를 결정한다.
  • 특별한 넓이 제약이 없자면 자식뷰의 콘텐츠 크기에 따라 VStack의 크기도 결정된다.
• LazyVStack은 ScrollView가 제공하는 너비를 그대로 받아 사용한다.
  • 그래서 별도 프레임 없이도 화면 가로 전체를 사용하게 된다.

 

이러한 차이 때문에 터치 영역에서 차이가 생기고, 

그에 따라 스크롤할 수 있는 부분이 달라지는 것이다.

 

---

메모리 관점에서의 차이

위의 코드에서 각 Row가 init되는 시점에 print를 찍고 있는데,

VStack과 LazyVStack을 각각 실행했을 때 콘솔에 찍히는 print문은 다음과 같다.

 

먼저 VStack의 경우, 화면에 보이는 Row는 37개까지밖에 보이지 않지만

100개의 Row가 한번에 찍히는 것을 볼 수 있다.

VStack

 

반면 LazyVStack의 경우 화면에 보이는 Row들만 init되고, 스크롤을 내리면 그제서야 다른 Row들이 생성되는걸 볼 수 있다.

LazyVStack

 

즉, LazyVStack은 VStack과 다르게

필요한 뷰만 렌더링하고, 스크롤함에 따라 추가 뷰를 생성하는 식으로 동작하기 때문에

메모리적으로 VStack보다 부담이 더 적다.

 

Row의 수를 100개가 아니라 1000개로 늘린 이후에

VStack과 LazyVStack의 메모리 사용량을 비교해보면 다음과 같다.

VStack

LazyVStack

 

이러한 차이가 있으므로, VStack과 LazyVStack은 표시할 콘텐츠에 따라 잘 선택해서 사용하는 것이 좋겠다.

• `VStack`: 아이템이 많지 않고 화면에 전부 표시해도 부담 없을 때
• `LazyVStack`: 리스트, 피드처럼 동적이고 대량의 콘텐츠를 화면에 표시해야 할 때

---

* 참고자료

https://hyerios.tistory.com/entry/SwiftUI-VStack-LazyVStack-%EB%B9%84%EA%B5%90%ED%95%98%EA%B8%B0

SwiftUI - VStack, LazyVStack 비교하기

https://calliek.tistory.com/19

[SwiftUI] VStack vs LazyVStack