⏳ 58. React Native 로딩 처리 & 스켈레톤 UI 전략 — UX를 부드럽게 만드는 핵심 기술

---

모바일 앱에서 사용자는 언제나 빠른 응답을 기대한다.
하지만 API 응답이 늦거나 이미지가 늦게 로드되면
로딩 처리가 없을 경우 앱이 멈춘 것처럼 보이게 된다.

이때 필요한 것이 바로
로딩 인디케이터(로딩 스피너)와
스켈레톤 UI(Skeleton Placeholder)다.

---

✅ 기본 로딩 인디케이터 — ActivityIndicator

import { ActivityIndicator } from 'react-native';

{isLoading ? (
  <ActivityIndicator size="large" color="#007aff" />
) : (
  <Content />
)}

• size: small | large
• color: HEX or theme color
  ✅ 가장 기본적이고 빠르게 적용 가능
  ❌ 반복 사용 시 UX 단조로움

---

🎨 커스텀 로딩 컴포넌트

function LoadingOverlay() {
  return (
    <View style={styles.overlay}>
      <ActivityIndicator size="large" />
      <Text style={styles.text}>불러오는 중...</Text>
    </View>
  );
}

✅ 텍스트 메시지, 배경, 아이콘 추가 가능
✅ 전역 isLoading 상태에 따라 앱 전체를 감싸는 처리 가능

---

🧸 애니메이션 로딩 — Lottie 활용

npm install lottie-react-native

<LottieView
  source={require('./loading.json')}
  autoPlay
  loop
  style={{ width: 100, height: 100 }}
/>

✅ 부드럽고 감성적인 UX
✅ 로딩 시간 체감 감소
❌ 용량 커질 수 있음, 캐릭터 중심 앱에 추천

---

💀 스켈레톤 UI — 뼈대만 먼저 보여주는 UX

<View style={styles.skeletonBox} />

• 컨텐츠 로딩 전 View 박스로 자리만 먼저 표시
• 배경: #E1E9EE, 움직이는 애니메이션 효과 가능

라이브러리 추천

npm install react-native-skeleton-placeholder

<SkeletonPlaceholder>
  <SkeletonPlaceholder.Item width={120} height={20} borderRadius={4} />
</SkeletonPlaceholder>

✅ 실제 컨텐츠의 형태와 위치를 유지
✅ 레이아웃 깜빡임 방지
✅ 스크롤 UX에도 부드럽게 연결됨

---

🧠 상황별 전략 정리

상황	처리 방식
전체 화면 데이터 로딩	ActivityIndicator 또는 커스텀 LoadingOverlay
특정 영역 지연	스켈레톤 UI 또는 Lottie
이미지 로딩	이미지 스켈레톤 or 페이드 인 효과
API 호출 상태	isLoading, isFetching 상태를 조건 분기로 처리
최초 진입 페이지	Splash + 스켈레톤 UI 병행 구성

---

📝 내가 느낀 점

예전엔 그냥 데이터 없으면 null을 리턴하거나
"불러오는 중입니다..." 같은 텍스트만 띄웠는데
그게 오히려 사용자에게 불안함을 주더라.

지금은 API 호출 시 무조건

• 로딩 상태 = ActivityIndicator or Skeleton
• 성공 상태 = 실제 컴포넌트
• 에러 상태 = Alert 또는 ErrorView
  이렇게 세분화해서 처리하고 있다.

---

⌛ “로딩은 기다림이 아니라, 설계다. 사용자는 UX로 기다린다.”

---