✅ Skeleton UI란?
- 로딩 중에 콘텐츠 형태를 미리 보여주는 것
- 로딩 체감 시간이 줄어듦
✅ Skeleton UI 적용 시 고려사항
1. 로딩 시간
- 0.5초 이내 → Skeleton 불필요
- 1초 이상 → Skeleton 효과적
- 짧은 로딩 + Skeleton → 깜빡임(flicker) 발생 주의
2. 실제 콘텐츠와 유사성
- 레이아웃 최대한 비슷하게
- 이미지 → 회색 박스
- 텍스트 → 라운드 긴 막대
- 모양 다르면 → 어색함, 혼란
3. 접근성(Accessibility)
- 스크린 리더는 Skeleton 인식하지 않음
- aria-busy="true", aria-hidden="true" 설정
<div aria-busy="true" aria-hidden="true">
<SkeletonCard />
</div>4. 자연스러운 전환
- Skeleton → 콘텐츠 변경 시 자연스럽게 전환
- fade-in, transition 효과 적용
5. 모바일 최적화
- 줄 수 조절
- Skeleton이 과다하면 화면이 지저분해 보임
6. 복잡한 UI → Skeleton 대신 Placeholder
- 예: 차트, 그래프
- "로딩 중..." 텍스트나 shimmer 애니메이션 권장
✅ Skeleton 로딩 제어 방식
방식 장점 단점
| isLoading 사용 | 직관적, 라이브러리 친화 | 깜빡임 발생 가능 |
|---|---|---|
| !data 판단 | 코드 간결 | 빈 데이터와 혼동 가능성 |
| 커스텀 상태(useState) | 세밀 제어 가능 | 코드 복잡 |
| setTimeout 조합 | 깜빡임 방지 | 인위적 delay 가능성 |
✅ 상황별 추천
- 일반 API 호출 → isLoading
- 데이터 undefined 감지 → !data
- 복잡 로딩 제어 필요 → 커스텀 상태
- 빠른 로딩 UX 최적화 → setTimeout 조합
✅ React Query v5 기준: isPending vs isLoading
구분 isPending isLoading
| 의미 | 요청 중 전체 상태 포함 | (v5에서는 deprecated) |
|---|---|---|
| 권장 여부 | ✅ 사용 권장 | ❌ 사용 자제 |
| 사용 예 | 스켈레톤 표시 시 | (과거용) |