[iOS] NSCache를 이용한 이미지 캐싱

안녕하세요. 컬렉션 뷰 써보려고 토이 프로젝트하다가 이미지 캐싱을 구현하게 돼서 블로그에 정리해 보려고 합니다.

 

원래 이미지 캐싱은 kingFisher를 많이들 사용하시던데 토이프로젝트 수준에서는 복잡한 로직이 없기 때문에 직접 구현해 보았는데요.

 

바로 이 NSCache를 통해 이미지 캐싱을 간편하게 구현할 수 있었습니다.

NSCache는 Key-Value 형태의 데이터를 임시적으로 저장하는데 사용하는 가변 컬렉션이라고 되어있네요.

 

캐싱에는 보통 디스크에 저장하는 방법과 메모리에 저장하는 방법이 있는데 NSCache는 메모리에 저장하는 방식이며 kingFisher도 메모리 캐싱할 때는 내부적으로 NSCache를 사용합니다.

메모리에 캐싱하면 메모리 용량이 부족하거나, 앱을 종료했을때 데이터가 삭제됩니다.

디스크에 캐싱하면 앱을 종료하더라도 데이터가 삭제되지 않으나 앱의 용량이 올라간다는 단점이 있습니다.

 

설명을 보면 NSCache는 key-value 쌍으로 구성되어있고 제네릭 클래스라서 타입을 지정해줘야 하는데 where 조건을 보면 각 타입은 AnyObject 프로토콜을 준수해야 하네요.

AnyObject는 모든 클래스가 암시적으로 준수하고 있는 프로토콜로 이 경우 key와 value가 클래스여야 한다는 뜻이 되겠네요.

 

먼저 CacheManger라는 싱글톤 클래스를 생성하여 NSCache<NSString, UIImage> 타입의 shared라는 static 상수를 선언했습니다.

혹시 다른 클래스에서 NSCache 타입의 변수를 선언하면 클래스가 메모리에서 해제되거나 초기화될 때 캐시도 초기화되므로 싱글톤을 통해서 실수로 초기화하는 일이 없게 만들었습니다.

 

컬렉션 뷰에서 보여질 cell안에 setImage라는 String 타입의 imageUrl을 전달받는 메서드를 선언하고 셀이 구성될 때 호출합니다.

 

1. 셀에서 이미지를 다운로드하기 전에 캐시에 해당 키(imageUrl)로 저장된 값(UIImage)이 있는지 확인하여 있다면 imageView.image에 할당하고 리턴합니다.

* NSCache.Object 메서드를 통해 캐시에서 키에 해당하는 값을 가져올 수 있는데 String은 구조체라 AnyObject를 준수하지 않아서 NSString 타입으로 키값을 생성하였기 때문에 캐스팅하여 사용했습니다.

 

2. guard문에서 url을 생성하여 data로 받아오고 UIImage(data: data)를 통해 image를 생성합니다.

* data를 받아오는 작업 때문에 global queue에서 비동기로 실행하였습니다.

 

3. 생성된 이미지를 캐시에 저장하고 imageView에 삽입합니다.

* NSCache.setObject를 통해 키와 값을 캐시에 할당할 수 있습니다.

 

NSCache를 이용한 간단한 이미지 캐싱에 대해서 살펴봤습니다.

기존에 컬렉션 뷰에서 아래로 스크롤 후 다시 위로 스크롤할 때 이미지를 다시 다운로드하느라 흰 화면이 떠있었는데 해당 코드 적용 후 빠르게 이미지가 세팅되는 모습을 볼 수 있었습니다.