react-native-fast-image
RN 초창기부터 이미지 처리의 사실상 표준이었던 라이브러이다.
React Native의 기본 <Image /> 컴포넌트는 몇 가지 성능 문제가 있었다.
- 느린 로딩 : 이미지 다운로드와 캐싱이 비효율적
- 깜빡임 현상 : 같은 이미지를 다시 불러올 때 캐시되지 않아 깜빡임
- 메모리 관리 부족 : 큰 이미지 리스트에서 메모리 누수 발생
- 우선순위 제어 불가 : 중요한 이미지를 먼저 로드할 수 없음
사용 예시
import FastImage from 'react-native-fast-image';
<FastImage
source={{
uri: 'https://example.com/image.jpg',
priority: FastImage.priority.high,
}}
style={{ width: 200, height: 200 }}
resizeMode={FastImage.resizeMode.cover}
/>주요 특징
1. 강력한 캐싱
- iOS : SDWebImage 사용
- Android : Glide 사용
- 디스크 / 메모리 캐싱 자동 처리
2. 이미지 업로드 우선순위 설정 : priority: FastImage.priority.high | normal | low
- high : 지금 당장 화면에 보여야 하는 가장 중요한 이미지일 경우 설정. 큰 배너나 사용자 프로필 사진 등
- normal : 기본값이며, 순서대로 처리한다. 특별한 순위 조정이 없기에. 중요도가 크지도 작지도 않은 이미지에 설정한다.
- low : 중요도가 낮은 이미지에 설정한다. 네트워크 자원이 부족하거나 CPU가 바쁠 때, 처리를 뒤로 보낸다. 스크롤을 많이 내려야 보이는 아래쪽 이미지등 현재 화면 밖에 있는 이미지에 설정해두면 좋다.
3. resizeMode
이미지가 지정된 크기의 컨테이너에 어떻게 맞춰질지 결정하는 속성이다.
- cover : 가장 많이 사용하며, 이미지 비율을 유지하면서 컨테이너를 꽉 채운다. 이미지가 컨테이너보다 크면 원본이 잘린다.
- contain : 이미지 전체가 다 보이도록 컨테이너 안에 맞추며, 잘림이 없지만 여백이 발생한다.
- stretch : 이미지 비율을 무시하고 컨테이너에 강제로 맞춘다. 비율이 깨져서 이미지가 늘어나거나 찌그러질 수 있기 떄문에 거의 사용하지 않는다.
4. Preloading (사전 로드)
FastImage.preload([
{ uri: 'https://example.com/image1.jpg' },
{ uri: 'https://example.com/image2.jpg' },
]);제품 상세 페이지에 진입하기 전, 해당 상품의 이미지를 사전에 로딩하면 더 빠른 이미지 로드 ux를 줄 수 있다.
// 상품 목록 → 상세 화면 이동 전
function ProductList() {
const handlePress = (product) => {
// 상세 이미지 미리 로드
FastImage.preload([
{ uri: product.detailImage1 },
{ uri: product.detailImage2 },
]);
navigation.navigate('Detail', { product }); // 이동 시 즉시 표시
};
}/// 무한 스크롤에서 다음 페이지 데이터의 이미지 미리 로드
function Feed() {
const [page, setPage] = useState(1);
const loadNextPage = async () => {
const nextPosts = await fetchPosts(page + 1);
// 다음 페이지 이미지 미리 로드
const images = nextPosts.map(post => ({ uri: post.thumbnail }));
FastImage.preload(images);
setPage(page + 1);
};
}preload와 priority의 차이
priority는 화면에 이미지가 10개가 있을 때 중요한거 먼저 보여달라는 기능이고, preload는 다음 화면으로 이동하기 전, 미리 받아놔서 해당 이미지에 접근했을 때 바로 보일 수 있도록 하는 기능이다. 두개를 함께 사용하면 최고의 성능을 낼 수 있다.
5. 캐시 제어
다운로드한 이미지를 메모리/디스크에 저장해두고, 같은 이미지 요청 시 재사용해준다. 별도의 설정을 할 필요 없으며 기본으로 동작한다. 아래처럼 캐시를 직접 삭제할 수도 있다. 로그아웃등 개인정보 삭제시 활용할 수 있다.
function logout() {
FastImage.clearMemoryCache(); // 앱 실행 중 임시 저장소
FastImage.clearDiskCache(); // 영구 저장소인 디스크 캐시 삭제
await AsyncStorage.clear();
navigation.navigate('Login');
}하지만 업데이트가 중단?
그러나 2025년에 해당 라이브러리는 업데이트가 중단된지 오래. react 19버전으로 넘어오면서 버전 호환이 되지 않는 문제가 있었다. 때문에 원작자가 업데이트를 멈춰버렸기에, 다른 개발자들이 최신 RN 버전과 호환이 되도록 fork 하여 수정 및 개발하여 작업을 계속 진행했다. 그 라이브러리가 바로 @d11/react-native-fast-image 이다.
RN 최신 버전만 맞춰줄 뿐 아니라 ios, android 최신 버전의 OS까지 대응을 해주시는 좋은 분들이다.
때문에 실무에서는 무조건 유지보수가 이루어지는 위의 라이브러리를 사용해야한다.
