🖼️ 38. React Native 이미지 처리 전략 — 로컬, 원격, 고해상도까지 완전 정리

---

React Native로 앱을 만들다 보면
이미지를 앱에 어떻게 넣고, 어떻게 보여줄지
고민이 많아진다.

웹과 다르게 모바일 앱에서는 다음과 같은 문제를 마주하게 된다:

• 해상도 높은 이미지가 깨짐
• 네트워크 이미지는 느림
• GIF는 지원되지 않음
• 이미지를 로컬에 저장할지, 서버에서 받아올지 고민됨

이번 글은 React Native에서
이미지 처리에 필요한 전반적인 지식과 실전 예시를 정리한 글이다.

---

✅ 기본 사용법: Image 컴포넌트

import { Image } from 'react-native';

<Image
  source={require('./assets/logo.png')}
  style={{ width: 100, height: 100 }}
/>

• 로컬 이미지 (require)
• 반드시 width와 height를 지정해야 함

---

🌐 원격 이미지 (Remote)

<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
/>

• 원격 URI 형식으로 지정
• resizeMode는 이미지 채우기 방식 설정

---

📐 resizeMode 종류

속성	설명
cover	비율 유지 + 꽉 채우기
contain	비율 유지 + 내부에 맞게 축소
stretch	비율 무시 + 꽉 채우기
center	가운데 정렬 (크기 유지)

---

🖼️ 고해상도 디바이스 대응 (@2x, @3x)

아이폰처럼 고밀도 디스플레이에서는 @2x, @3x 이미지를 제공해야 깨지지 않는다.

예시:

assets/
├── icon.png
├── icon@2x.png
├── icon@3x.png

<Image source={require('./assets/icon.png')} />

✅ 같은 이름으로 두고 React Native가 자동으로 디바이스 해상도에 맞는 버전을 불러옴

---

🚀 이미지 캐싱 문제와 해결

React Native 기본 Image는 캐싱 기능이 약함
→ 반복 로딩 시 깜빡이거나 느려질 수 있음

👉 대안: react-native-fast-image

npm install react-native-fast-image

import FastImage from 'react-native-fast-image';

<FastImage
  style={{ width: 100, height: 100 }}
  source={{ uri: 'https://image.com/pic.jpg', priority: 'high' }}
  resizeMode={FastImage.resizeMode.contain}
/>

✅ 자동 캐싱
✅ 로딩 우선순위
✅ gif, 웹P 지원

---

🧠 기타 팁

• 로딩 중 indicator 처리: ActivityIndicator와 함께 처리
• background image는 ImageBackground 컴포넌트 사용
• 서버 이미지 사이즈는 압축된 상태로 보내기
• 이미지가 많을 경우 lazy-loading 고려

---

📝 내가 느낀 점

처음엔 그냥 Image로 다 되는 줄 알았는데,
프로필 이미지가 흐릿하거나, 리스트에 이미지가 느리게 뜨는 문제가 계속 생겼다.
그때부터 @2x 구조, FastImage, 캐싱 전략을 제대로 이해하게 됐다.

지금은 이미지 처리도 하나의 성능 최적화 단계로 생각한다.

---

🖼️ “이미지는 UX다. 깨지면 신뢰도도 같이 깨진다.”

---