React Native 이미지 최적화 정리: 스크롤 성능을 살리는 이미지 전략

FlatList 최적화까지 했는데도
앱이 여전히 무겁게 느껴진다면
다음으로 의심해야 할 건 거의 항상 이미지다.

실무에서 체감 성능 문제를 추적해보면
원인이 이런 경우가 많다.

• 이미지 용량이 너무 큼
• 스크롤할 때마다 이미지 다시 로드
• 리스트에 이미지가 많은데 최적화 안 됨

이 글에서는
React Native에서 이미지를 다룰 때 꼭 알아야 할 최적화 포인트를
실무 기준으로 정리한다.

---

이 글이 필요한 사람

• 이미지가 많은 화면에서 스크롤이 끊기는 경우
• FlatList는 최적화했는데 여전히 느린 경우
• 이미지 캐싱 개념이 잘 안 잡히는 경우

---

React Native에서 이미지가 느린 이유

웹과 달리
모바일 앱에서는 이미지가 더 민감하다.

• 메모리 사용량 제한
• 네트워크 환경 다양
• 저사양 기기 존재

특히 리스트 + 이미지 조합은
최적화하지 않으면 바로 성능 문제가 드러난다.

[이미지: 이미지 로딩이 성능에 미치는 영향 구조]

---

기본 Image 컴포넌트의 한계

React Native 기본 Image는
간단한 용도에는 충분하지만,
실무에서는 한계가 명확하다.

기본 Image의 특징

• 캐싱 제어가 제한적
• 대용량 이미지에 취약
• 스크롤 리스트에서 재로딩 발생 가능

그래서
이미지 많은 앱에서는
별도 전략이 필요해진다.

---

가장 먼저 해야 할 것: 이미지 사이즈 점검

코드보다 먼저
이미지 자체부터 점검해야 한다.

흔한 실수

• 원본 4000px 이미지를 그대로 사용
• 모바일에서 필요 없는 해상도
• 썸네일용 이미지 따로 없음

이미지 최적화의 50%는
이미지 파일 크기 줄이기다.

권장 기준

• 썸네일: 200 ~ 400px
• 리스트 이미지: 화면 표시 크기 기준
• 포맷: 가능하면 WebP

---

Image에 반드시 size를 주는 이유

React Native에서는
Image에 width, height가 거의 필수다.

<Image
  source={{ uri: imageUrl }}
  style={{ width: 100, height: 100 }}
/>

사이즈가 없으면

• 레이아웃 계산이 늦어지고
• 스크롤 중 깜빡임 발생
• 성능 저하로 이어질 수 있다

---

resizeMode 제대로 쓰기

이미지가 깨지거나
비율이 이상할 때 대부분 이 문제다.

<Image
  resizeMode="cover"
/>

자주 쓰는 값은 이 정도다.

• cover : 영역 꽉 채움 (비율 유지)
• contain : 전부 보이게
• stretch : 비율 무시 (권장 X)

리스트 썸네일에서는
cover가 가장 많이 쓰인다.

---

이미지 캐싱이 왜 중요한가

이미지 캐싱이 없으면
스크롤할 때마다 이런 일이 반복된다.

• 네트워크 요청
• 디코딩
• 메모리 로드

이게 쌓이면
스크롤 성능이 급격히 떨어진다.

그래서 실무에서는
이미지 캐싱을 거의 필수로 고려한다.

---

이미지 캐싱 전략 선택지

1️⃣ 기본 Image + 서버 캐싱

• 서버에서 Cache-Control 헤더 설정
• 간단하지만 제어 한계 있음

2️⃣ 라이브러리 사용 (실무에서 흔함)

• 캐싱
• 로딩 플레이스홀더
• 에러 처리

이미지가 많은 앱이라면
두 번째가 현실적인 선택이다.

---

이미지 로딩 중 처리하기

이미지가 늦게 뜨면
사용자는 앱이 멈춘 걸로 느낀다.

그래서 보통
로딩 상태를 시각적으로 처리한다.

<View style={{ width: 100, height: 100, backgroundColor: '#eee' }} />

• 스켈레톤 UI
• 단순 회색 박스

이것만 있어도
체감 품질이 꽤 달라진다.

---

FlatList + Image 조합에서 주의할 점

이미지 최적화는
리스트와 함께 봐야 한다.

• Item 컴포넌트 분리
• React.memo 적용
• 이미지 컴포넌트 안에서 불필요한 계산 제거

이미지 하나가
리스트 전체 성능을 망치는 경우도 많다.

---

실무에서 자주 겪는 문제들

• 이미지가 늦게 로드되면서 레이아웃 흔들림
• 스크롤 시 이미지 깜빡임
• 같은 이미지인데 계속 네트워크 요청 발생

이건 대부분
사이즈, 캐싱, 구조 문제 중 하나다.

---

실무 기준 이미지 최적화 체크리스트

이미지 성능이 의심되면
아래부터 확인하면 된다.

• 이미지 해상도 과하지 않은가
• width / height 명시했는가
• resizeMode 적절한가
• 리스트 아이템 분리했는가
• 캐싱 전략을 고려했는가

---

정리

• 이미지 최적화는 체감 성능에 직접적이다
• 기본 Image는 한계가 있다
• 이미지 사이즈 관리가 최우선이다
• 리스트 + 이미지는 특히 주의해야 한다
• 캐싱을 고려하면 스크롤 품질이 크게 좋아진다

다음 글에서는
앱 배포 전 반드시 거치는 단계인
Android / iOS 빌드와 배포 흐름을
입문자 기준으로 정리해보려고 한다.