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(Identifiable 미적용)

After(Identifiable 적용)

확인이 되셨나요..?
선택된 셀을 집중해서 보시면 단번에 확인 가실겁니다.
Before의 리스트는 셀의 유니크함을 판별하지 못하기 때문에 애니메이션도 새것 기존것 구분없이 휙휙 바뀌는걸 보실 수 있습니다.
반면 After의 리스트에서 데이터가 바뀌지 않는 셀은 그대로 남으면서 데이터가 변경된 셀만 애니메이션 되는걸 보실 수 있습니다.

아래의 영상을 보시면 더 확연한 차이를 느끼실 수 있습니다!

유저들은 알아채지도 못할 미묘한 변화지만 이런 작은 퀄리티가 모여 괜찮은 앱이 탄생한다고 생각합니다.