Lazy 스택으로 메모리를 챙겨보자

Taeyoung Won·2023년 5월 14일

swift swiftui

SwiftUI

목록 보기

7/7

때는 SwiftUI를 정말 맨 처음 배울 때...

아마 다들 나처럼 Stack 3형제부터 배웠을 것이라고 생각한다. (V, H, Z 친구들)

어느 날 VStack을 만들다가 이상한 친구를 발견했다.

LazyVStack

이미 Swift 문법을 공부할 때 lazy var를 배웠기 때문에 비슷한 기능을 할 것이라고 바로 유추할 수 있었다.

'아 실제로 사용될 때, 지연 생성하는 친구겠구나'

그 당시에는 막 SwiftUI를 공부할 때였어서 이런게 있구나 하고 지나갔었다.

그러다가 최근에 렌더링 요소가 많은 스크롤뷰를 만들게 되면서, LazyVStack의 성능이 얼마나 효율적인지 궁금해졌다.

그러니까 한 번 확인해보자.

LazyVStack

늘 그랬듯 공식문서부터...

자식 뷰들이 수직 방향으로 쌓임 + 아이템들이 실제로 필요한 시점에 생성

위와 같은 특징을 가진 뷰라고 한다.

개요에서부터 100개의 Row 텍스트를 보여주는 예시를 설명하고 있다.

실제로 어떤 차이가 있는지 한 번 확인해보자.

생성 시점

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

Row에 해당하는 서브뷰인 RowView를 만들었다.

초기화되는 시점을 확인하기 위해, init 내부에서 print 하도록 했다.

차이를 확실하게 보기위해 아이템은 5,000개로 늘렸다.

VStack

우선 일반적인 VStack부터 확인해보자.

앱이 시작하자마자 5,000개가 모두 초기화되서 print가 출력됐다.

LazyVStack

이번엔 LazyVStack을 확인해보자.

Lazy는 구별을 위해 오렌지 색으로 칠해줬다.

아까와 달리 뷰에 표시되는 Row 21까지만 print가 출력됐다.

Row 21 이후로는 아직 화면에 표시되지 않았기 때문에 초기화를 지연시키고 있는 것이다.

스크롤을 조금 해보면 또 다른 특징을 볼 수 있다.

스크롤 하면서 새로운 Row가 표시될 때마다 새롭게 초기화되면서 print가 출력된다.

특히 스크롤뷰 하단을 보면 Row 50까지 화면에 나오지만, 실제로 초기화는 Row 71까지 된다.

스크롤 동작을 할 때 사용자에게 부드럽게 화면을 보여주기 위해서, 직후에 그려질 화면까지는 미리 초기화를 해두는 것을 알 수 있다.

딱 21개 차이가 나는 것을 보니 화면 사이즈에서 표시할 수 있는 Frame 범위만큼 추가적으로 렌더링 하는 것 같다.

그런데 이상하게 print가 두 번씩 출력된다.

찾아보니 SwiftUI에서 뷰 구성 및 렌더링 최적화 과정에서 재생성이 일어날 수 있다고 한다.

deinit으로 확인해보고 싶은데, 구조체에는 달 수가 없으니 메모리 체크용 class를 만들어서 deinit을 달고 프로퍼티로 넣어주었다.

struct RowView: View {
  let num: Int
  let memoryChecker: MemoryChecker
  
  init(num: Int) {
    print("Row \(num)")
    self.num = num
    self.memoryChecker = .init(num: num)
  }
  
  var body: some View {
    Text("Row \(num)")
      .font(.title)
  }
}

class MemoryChecker {
  let num: Int
  
  init(num: Int) {
    self.num = num
  }
  
  deinit {
    print("Row \(num) Gone")
  }
}