[SwiftUI] 효율적으로 List 그리기

SwiftUI 에서는 배열되어있는 데이터를 List로 표현할 때 List 빌더를 사용합니다. 사용 방법은 아래와 같습니다.

List(drinks, id: \.name) { drink in
    DrinkRow(drink: drink)
}

정말 간단합니다. 하지만 List 의 단점은 전달받은 모든 데이터에 대해 뷰를 그리기 때문에 화면에 보이지 않는 부분까지 전부 계산을 하게 됩니다. 데이터의 양이 만약 적다면 List 가 보여지는 속도에 영향이 거의 없을 겁니다. 하지만 만약 데이터의 양이 방대하다면 List는 지금 바로 보여줄 필요 없는 데이터에 대한 뷰도 계산하기 때문에 불필요한 작업량이 상당히 늘어날 것입니다.

또한 struct 타입으로 뷰를 관리하는 SwiftUI 특성상 데이터나 상태에 대한 변화가 있으면 뷰의 body를 다시 계산하기 때문에 앞서 언급한 경우처럼 많은 양의 데이터를 가지고 List를 그리는 경우 상위뷰에 의해 불필요한 작업을 수차례 반복할 수도 있습니다.

어떻게 하면 이 불필요한 작업량을 줄일 수 있을까요? 화면에 나오는 부분만 신경쓰게 하면 좀 더 효율적이지 않을까요?

SwiftUI2 에서 새로 공개된 LazyVStack 과 LazyHStack 을 사용하면 좀 더 효율 적으로 리스트를 생성할 뿐만 아니라 심지어 더 쉽게 커스터마이징을 할 수 있습니다. LazyVStack를 사용하여 리스트 뷰를 만드는 방법은 아래와 같습니다.

ScrollView {
    LazyVStack {
        ForEach(drinks) { drink in
            DrinkRow(drink: drink)
        }
    }
}

이는 horizontal 스크롤 뷰도 동일하게 적용됩니다.

이렇게 생성된 리스트는 lazy특성상 화면에 뷰를 보여줘야할 때마다 필요한 만큼만 계산을 합니다. (lazy는 호출되기 전까지 어떠한 연산도 하지 않다가 처음 호출 될 때 연산을 합니다)

Apple Developer Documentation