WWDC21에서 SwiftUI의 List뷰의 성능&애니메이션 최적화에 관한 내용이 있었습니다.
그 내용 중에서 리스트뷰 셀 재사용 최적화 및 애니메이션 변경점에 관해서 알아보겠습니다.
리스트에 사용될 모델에 Identifiable을 상속하면 리스트뷰의 셀이 재사용 되고 애니메이션도 이쁘게 나오게 된다고 합니다.
그 내용을 직접 프로젝트에 적용해 보기로 했습니다!
// Before
List {
ForEach(viewModel.state.orderList.indices, id: \.self) {
// 셀 그리기~
}
}
// After
List {
// orderList의 모델에 Identifiable을 상속하였기에 가능
ForEach(viewModel.state.orderList) {
// 셀 그리기~
}
}
Before 코드를 보시면 orderList라는 배열의 모델들이 Identifiable을 상속하고 있지 않아 어쩔 수 없이 "id: /.self" 이런 식으로 루프를 돌려주는 부분을 보실 수 있습니다.
각 모델들은 유니크하지 않게 되고 결국 셀 재사용이 안되기 때문에 최적화에 실패하게 됩니다.
After 코드는 모델에 Identifiable을 상속하고 각 모델들은 유니크하게 되어 셀 재사용이 가능합니다.
viewModel.state.orderList가 업데이트 되고 리스트뷰의 셀들이 다시 그려져도 기존 남아있던 셀들은 다시 그려지지 않고 그대로 재사용 됩니다.
(집중해서 봐야합니다! 특히 리스트가 업데이트 될 때 어떤 셀이 새로 생기고 그대로 남아있는지 유심해서 봐야합니다!)
확인이 되셨나요..?
선택된 셀을 집중해서 보시면 단번에 확인 가실겁니다.
Before의 리스트는 셀의 유니크함을 판별하지 못하기 때문에 애니메이션도 새것 기존것 구분없이 휙휙 바뀌는걸 보실 수 있습니다.
반면 After의 리스트에서 데이터가 바뀌지 않는 셀은 그대로 남으면서 데이터가 변경된 셀만 애니메이션 되는걸 보실 수 있습니다.
아래의 영상을 보시면 더 확연한 차이를 느끼실 수 있습니다!
유저들은 알아채지도 못할 미묘한 변화지만 이런 작은 퀄리티가 모여 괜찮은 앱이 탄생한다고 생각합니다.