🐢 43. React Native 이미지 Lazy Loading 전략 — 화면 진입 시점 감지부터 최적화까지

---

앱에 이미지가 많아지면 성능이 뚝 떨어지고,
초기 로딩 시간도 길어지게 된다.
이를 해결하는 대표적인 방법이 바로 Lazy Loading, 즉 지연 로딩이다.

이번 글에서는 React Native에서 이미지 Lazy Loading을 구현할 수 있는
가장 실용적인 방식들을 소개한다.

---

✅ 왜 Lazy Loading이 중요한가?

• 모든 이미지를 한 번에 로딩하면 메모리 사용량 증가
• 느린 네트워크 환경에서 UX 저하
• FlatList 스크롤 성능 저하

Lazy Loading은 "화면에 들어오기 전까진 이미지를 불러오지 않음"으로
성능과 UX를 동시에 향상시킬 수 있는 전략이다.

---

🧱 기본 구조 — FlatList + Viewability 감지

React Native에는 브라우저의 Intersection Observer는 없지만,
FlatList의 onViewableItemsChanged를 사용하면 유사한 처리가 가능하다.

<FlatList
  data={images}
  renderItem={renderItem}
  onViewableItemsChanged={onViewableItemsChanged}
  viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
/>

const onViewableItemsChanged = useRef(({ viewableItems }) => {
  const visibleIds = viewableItems.map((item) => item.item.id);
  setVisibleImageIds(visibleIds);
}).current;

✅ 화면에 50% 이상 보이는 아이템만 감지해서
렌더링 조건으로 사용할 수 있다.

---

🖼️ LazyImage 컴포넌트 만들기

function LazyImage({ uri, shouldLoad }) {
  if (!shouldLoad) {
    return <View style={{ width: 200, height: 200, backgroundColor: '#eee' }} />;
  }

  return (
    <Image
      source={{ uri }}
      style={{ width: 200, height: 200 }}
      resizeMode="cover"
    />
  );
}

---

🔄 전체 예시 흐름

<FlatList
  data={data}
  renderItem={({ item }) => (
    <LazyImage
      uri={item.image}
      shouldLoad={visibleImageIds.includes(item.id)}
    />
  )}
  onViewableItemsChanged={onViewableItemsChanged}
/>

• 이미지가 화면에 보일 때만 실제 <Image /> 렌더링
• 스켈레톤 플레이스홀더로 UX 보완 가능

---

⚙️ 추가 최적화 포인트

항목	전략
캐싱	react-native-fast-image 사용 (자동 캐싱)
이미지 압축	서버에서 WebP, 압축 버전 제공
디바운싱	onViewableItemsChanged에 debounce 적용 가능
해상도 대응	@2x, @3x 구성 필수

---

📱 실전에서 느낀 점

FlatList에 100장 넘는 이미지가 있을 때
렌더링 지연이 심했고, 스크롤도 많이 끊겼다.

그걸 Lazy Loading으로 바꾸니까
화면 진입 시점에만 이미지가 로딩되어
스크롤 성능과 메모리 점유율이 크게 개선됐다.

지금은 무조건 LazyImage 같은 컴포넌트를 만들어
공통 이미지 컴포넌트로 활용하고 있다.

---

🐢 “성능은 빠른 코드가 아니라, 불필요한 코드를 줄이는 데서 나온다.”

---