[iOS] 이미지 깜빡임 & 잘못된 이미지 표시 — 비동기 로딩의 함정

개요

iOS에서 자주 발생하는 문제:

👉 스크롤하면 이미지가 바뀌거나 깜빡임

예:

• 다른 셀의 이미지가 순간적으로 보임
• 이미지가 늦게 바뀜
• 빠르게 스크롤 시 엉뚱한 이미지 표시

---

의미

👉 비동기 이미지 로딩 + 셀 재사용이 결합된 문제

• 이미지 요청은 늦게 완료됨
• 그 사이 셀은 이미 재사용됨

→ 결과:
“요청한 셀 ≠ 현재 셀”

---

문제 코드

func configure(with item: Item) {
    loadImage(url: item.imageURL) { image in
        DispatchQueue.main.async {
            self.imageView.image = image // ❌ 잘못된 셀에 들어갈 수 있음
        }
    }
}

👉 문제:

• 이미지 요청이 늦게 완료됨
• 셀은 이미 다른 데이터로 바뀜

---

해결 코드

방법 1: 이미지 초기화 (기본)

imageView.image = nil

👉 이전 이미지 잔상 제거

---

방법 2: URL 비교로 방어 (핵심)

var currentURL: URL?

func configure(with item: Item) {
    currentURL = item.imageURL
    imageView.image = nil

    loadImage(url: item.imageURL) { [weak self] image in
        guard let self = self else { return }

        if self.currentURL == item.imageURL {
            DispatchQueue.main.async {
                self.imageView.image = image
            }
        }
    }
}

👉 핵심:

• “요청한 이미지 == 현재 데이터”일 때만 적용

---

방법 3: 라이브러리 사용 (실무 추천)

👉 직접 구현 대신:

• Kingfisher
• SDWebImage

→ 캐싱 + cancel 자동 처리

---

한 줄 정리

👉 비동기 + 재사용 = 항상 불일치 가능 → URL 체크로 막아라