[iOS] SwiftUI LazyVStack LazyHStack :: lazy load views

안녕하세요! 오늘은 SwiftUI 의 Lazy 키워드를 정리하려고 합니다.

 

지난번에 VStack, HStack, ZStack 에 대해서 정리를 했었는데, ZStack 을 제외하고는 앞에 Lazy 라는 키워드가 붙은 LazyVStack, LazyHStack 이 있습니다 👀 Lazy 라는 키워드가 붙는 건 어떤 차이가 있는지 궁금해서 찾아봤어요.

 

👀 LazyVStack LazyHStack :: lazy load views

LazyVStack 은 VStack 과 동일하게 vertical (세로) 방향으로 항목들을 보여주는 뷰이지만, 각 항목이 필요할때만 생성합니다. LazyHStack 은 Horizontal (가로) 방향으로, LazyVStack 과 방향만 다르고 동일합니다!

 

Stack 이 lazy 하다는 것은, 스택뷰의 각 항목들이 화면에 렌더링되기 전까지 항목을 만들지 않는다는 걸 의미해요. 화면에 보여지지 않는 항목은 그리지 않고 있느니 게으르다고 표현하지만, 보여지지 않는 항목을 그리지 않기 때문에 화면에 보여질 데이터는 더 빠르게 그릴 수 있는 장점이 있어요! 기존의 UITableView 에서 화면에 보여지는 Cell 만 생성해놓고, cell 을 reuse 하는 것과 동일하다고 볼 수 있을것 같아요.

---

스택뷰가 화면에 보여지는 영역에만 있다면 퍼포먼스상 이슈가 없겠지만, 스택뷰의 데이터가 엄청 많고 스크롤뷰 내에 들어있어있다면 퍼포먼스상 이슈가 생기겠죠?! 화면에 전체 데이터가 다 보여지지 않는 경우라면 Lazy Stack 을 사용하는게 좋겠네요! 🙂

 

아래 예시처럼 데이터가 많은 경우 화면에 데이터가 보여지는데 시간이 다른게 느껴질거에요!

struct ContentView: View {

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 16) {
                ForEach(0 ..< 10000) { item in
                    ZStack {
                        RoundedRectangle(cornerRadius: 20)
                            .stroke(.blue, lineWidth: 2)
                            .frame(height: 100)
                        Text("\(item)")
                    }
                }
            }
            .padding()
        }
    }
}

 

아래 GIF 왼쪽이 LazyVStack 을 사용한것이고 오른쪽이 VStack 을 사용한거에요! 영상으로 찍어보니 1초이상 시간이 더 걸리더라구요. 조금 정신없긴 하지만 차이가 보이시겠죠?

LazyVStack vs VStack

 

 

Lazy 키워드가 붙은 LazyVStack, LazyHStack 만 있는게 아니라 Grid 의 경우 LazyVGrid, LazyHGrid 가 있습니다. 참고로 Grid 는 UIKit 의 UICollectionView 와 비슷하게 여러개의 column 으로 데이터를 나타낼 수 있는 뷰이고, List 는 UITableView 와 비슷하게 하나의 column 으로 데이터를 나타낼 수 있는 뷰입니다! 

 

List 의 경우에는 Lazy 키워드가 붙은게 없어서 찾아봤는데, 아래 링크의 포럼 답변에서는 List 의 경우에는 전부 lazy 하게 로드한다고 하네요! 위의 예제를 List 로 변경하고 빌드해보니 LazyVStack 을 사용하는것과 화면에 로드하는 시간이 비슷해요. 

https://developer.apple.com/forums/thread/651256

 

---

 

📑 참고 문서

LazyVStack -  https://developer.apple.com/documentation/swiftui/lazyvstack

LazyVGrid - https://developer.apple.com/documentation/swiftui/lazyvgrid

List - https://developer.apple.com/documentation/swiftui/list