Cell 비동기 업데이트 시 주의사항

포스팅 주제
이번 포스팅에서는 Cell의 Data source를 (네트워크로부터 불러온다던지 등) 로딩하는데 오래 걸리면서, 이를 비동기로 제공할 때 발생할 수 있는 문제와 해결방법에 대해 다룹니다

🔸 문제

서버로부터 cell에 사용될 이미지/데이터를 받아와 completion handler에서 비동기로 UI를 업데이트하는 것은 드문 일이 아닙니다

하지만, 이런 비동기 UI업데이트가 Cell 재사용 메커니즘과 만나 아래와 같은 문제를 유발할 수 있습니다. 스크롤을 빠르게 내리면 (9,9) cell의 이미지가 수차례 바뀌는 모습을 볼 수 있는데 이는 UX를 헤치는 요인이 됩니다

🔸 원인

스크롤을 빠르게 내리면 cell에 대한 많은 비동기 작업(이미지를 불러와 UI 업데이트)들이 issue됩니다. 시간이 지난 후 이 작업들이 처리되면서 cell UI를 업데이트하게 되는데, 문제는 우리가 cell을 재사용하기 때문에 작업들이 업데이트하려는 target cell이 겹칠 수 있다는 점입니다

즉, 동일한 cell에 대한 비동기 UI 업데이트가 뒤늦게 순차적으로 처리되며 위와 같은 현상이 발생하게 됩니다

🔸 해결방법

가장 정석적인 방법은, 가장 최근 작업을 제외하고 과거에 요청된 작업들을 취소하는 것일 것입니다. 하지만 우리가 작업들을 직접적으로 취소시킬 방법이 없으므로 차선책으로, 작업이 완료되더라도 UI 업데이트를 하지 않도록 구현할 수는 있습니다

아래와 같이, 작업이 issue되던 시점의 indexPath와 현재 업데이트하려는 cell의 indexPath가 다르다면 업데이트하지 않도록 구현하는 것이 하나의 해결방법이 될 수 있습니다

URLSession.shared.dataTask(with: url) { data, response, error in
    ...
    ...
    
    //UI 업데이트
    DispatchQueue.main.async {
	if indexPath == tableView.indexPath(for: cell) {
		cell.picture.image = image
	}
    }
}.resume()