SwiftUI) LazyVStack과 VStack

우선 Stack은 기본적으로 HStack이 있고, VStack이 있는것은 알것이다. (그냥 방향차이임)

그런데 앞에 Lazy가 붙는것과 아닌것의 차이는 무엇일지 한번 고민해보고 왜 그렇게 해야하는지에 대한 고민도 해보자.

Lazy키워드에 관해서

Swift에서 "lazy" 키워드는 지연 초기화를 구현하는 데 사용된다.

이를테면, 객체의 인스턴스 변수를 생성할 때, 그 변수가 사용되기 전까지 생성하지 않도록 하는 방법이다.

즉, "lazy" 키워드를 사용하면, 해당 변수를 사용하기 전까지는 메모리에 올려놓지 않으므로, 성능과 메모리 사용을 최적화할 수 있다.

예를 들어,

class Example {
    var expensiveProperty = SomeExpensiveClass()
}

let instance = Example()

이 코드에서는 expensiveProperty가 Example 객체가 만들어질 때 함께 만들어진다. 그러나 만약 expensiveProperty가 Example 객체를 사용하는 코드에서 사용되지 않는 경우, 비용이 큰 초기화 과정은 불필요하게 발생한다. 이런 경우 "lazy" 키워드를 사용하여 expensiveProperty를 지연 초기화 할 수 있다.

class Example {
    lazy var expensiveProperty = SomeExpensiveClass()
}

let instance = Example()

// expensiveProperty를 처음 사용할 때에만 초기화됩니다.
print(instance.expensiveProperty)

이 코드에서는 expensiveProperty를 지연 초기화하므로, Example 객체가 만들어질 때 someExpensiveProperty 객체는 생성되지 않는다. 대신, expensiveProperty가 처음 사용될 때 생성된다.

즉 lazy는 해당 프로퍼티가 사용될때 메모리에 올락

따라서 lazy는 let이 아닌 var로 항상 설정해야한다. ⇒ 초기화 시점에서 값이 정해져 있지 않고 세팅되어야 하기 때문이다.

LazyVStack, VStack의 차이점

따라서 LazyVStack이라는 키워드 또한 동일하게 작동한다.

결론부터 말하자면 VStack에서 화면에 보이지 않을때는 메모리에 올리지 않다가, 해당 부분이 보일때 Stack에 추가하게 되는 형태를 의미한다.

해당 부분은 View hierarchy를 확인해보면 더 명백히 알 수 있다.

예시코드

struct ContentView: View {
  @State private var isGreenAppear: Bool = false

  var body: some View {
    ZStack(alignment: .top) {
      ScrollView {
        VStack(spacing: 0) { //혹은 LazyVStack
          Rectangle()
              .foregroundColor(.red)
              .frame(height: 400)
          Rectangle()
              .foregroundColor(.blue)
              .frame(height: 400)
          Rectangle()
              .foregroundColor(.green)
              .frame(height: 400)
              .onAppear {
                isGreenAppear = true
              }
        }
      }

      Text("Green is drawn")
          .background(Color.white)
          .opacity(isGreenAppear ? 1 : 0)
    }

  }
}

struct ContentView: View {
  @State private var isGreenAppear: Bool = false

  var body: some View {
    ZStack(alignment: .top) {
      ScrollView {
        LazyVStack(spacing: 0) { //혹은 LazyVStack
          Rectangle()
              .foregroundColor(.red)
              .frame(height: 400)
          Rectangle()
              .foregroundColor(.blue)
              .frame(height: 400)
          Rectangle()
              .foregroundColor(.green)
              .frame(height: 400)
              .onAppear {
                isGreenAppear = true
              }
        }
      }

      Text("Green is drawn")
          .background(Color.white)
          .opacity(isGreenAppear ? 1 : 0)
    }

  }
}

Vstack에서는 처음부터

이렇게 나와있지만, Lazy는 그려지지 않는다.

즉 처음부터 Green의 사각형이 그려진것이 아닌, 화면에 보일때 그려지는것이 된다.

이를이용하면 infinite scroll이 가능하게 된다.

infinite Scroll

infinite scroll이전에 , StackView에 꽤나 많은 수의 뷰를 추가하게 되면 이런 현상이 발생한다.

즉 10몇개 이상넣으면 발생하는것 같은데, 이럴때는 어떻게 처리해야할까?

혹은 우리가 뷰를 계속해서 1에서 10까지를 넣을때 10이 끝나는 시점에서 다시 1의 값을 보여주고 싶다면 어떤방식으로 처리해야 할까?

데이터를 계속해서 받아오는경우

데이터를 계속해서 받아오는경우는 다음과 같이 처리하게된다.

앞서 썻던 예제에서 onAppear함수를 사용하면 된다.

총 데이터가 10개가 있다고 할때, 5번째 페이지가 생성될때, onAppear함수를 통해서 네트워킹으로 데이터를 받아오고 이를 배열에 저장한다.

데이터를 가지고 있는 배열을 forEach문을 통해서 LazyVStack에 값을 넣게된다.

---

참고자료

Swift: LazyVStack으로 Infinite Scroll 구현하기

진짜 이분의 블로그는 마치 보석이라고 할수있겠다.