React Native 앱은 이미지(로컬 및 원격)를 표시하고 에셋(폰트 등)을 번들합니다. 이미지를 효율적으로 로드하고, 다양한 해상도를 처리하며, 이미지 성능을 최적화하는 방법을 이해하는 것은 좋은 UX와 성능에 중요합니다.
이미지 로드
jsx
{ } ;
React Native 앱은 이미지(로컬 및 원격)를 표시하고 에셋(폰트 등)을 번들합니다. 이미지를 효율적으로 로드하고, 다양한 해상도를 처리하며, 이미지 성능을 최적화하는 방법을 이해하는 것은 좋은 UX와 성능에 중요합니다.
{ } ;
로컬 이미지는 require(번들됨)를 사용하고, 원격 이미지는 uri를 사용합니다. 이미지는 명시적 크기(width/height)가 필요합니다 — 웹과 달리 파일에서 자동 크기 조정되지 않습니다.
→ 해상도: @2x와 @3x 변형 제공 (logo.png, [email protected], [email protected]) → RN이
기기 밀도별로 올바른 것 선택 (모든 화면에서 선명)
→ resizeMode: cover / contain / stretch / center → 이미지가 박스에 맞는 방식
✓ 적절한 크기의 이미지 사용 (작은 view에 거대한 이미지 로드하지 않기 — 메모리/대역폭
낭비)
✓ FastImage (react-native-fast-image) → 더 나은 원격 이미지 성능 + 캐싱
(이미지를 캐시하여 재다운로드 안 함; 기본 Image보다 목록에서 매끄러움)
✓ 올바른 형식 사용 (더 작은 크기엔 WebP); lazy-load; 로딩 중 placeholder
✓ 이미지는 목록에서 흔한 메모리 문제 / jank의 원인 → 최적화
이미지와 에셋을 처리하는 방법을 이해하는 것은 가치가 있는데, 대부분의 앱은 이미지를 표시하고 이를 효율적으로 하는 것이 UX와 성능 모두에 영향을 미치므로 유용한 실용 지식입니다.
이미지 로드 — 로컬 이미지는 require(빌드 타임에 번들), 원격 이미지는 uri를 통해, 그리고 React Native에서 이미지는 명시적 크기가 필요(웹과 달리 자동 크기 조정 안 됨)하다는 중요한 점 — 을 이해하는 것은 어떤 이미지든 표시하는 데 필요합니다.
해상도 처리(React Native가 기기 밀도별로 올바른 것을 선택하여 화면 전반에서 선명한 이미지를 위한 @2x/@3x 변형 제공)와 resizeMode(이미지가 박스에 맞는 방식)를 이해하는 것은 Android와 iOS의 다양한 화면 밀도에서 잘 보이는 이미지에 중요합니다.
가장 중요하게, 이미지 성능 최적화를 이해하는 것은 가치가 있는데, 이미지는 흔한 메모리 문제와 jank의 원인(특히 목록에서)이기 때문입니다. 적절한 크기의 이미지 사용(작은 view에 거대한 이미지를 로드하지 않기, 메모리와 대역폭 낭비), 더 나은 원격 이미지 성능과 캐싱을 위한 FastImage 사용(이미지가 재다운로드되지 않고 목록이 매끄럽게 스크롤 — 이미지가 많은 목록에서 기본 Image보다 상당한 개선), 효율적 형식(WebP) 사용, placeholder와 함께 lazy-load.
이러한 최적화가 중요한 이유는 이미지가 많은 앱(흔함 — 피드, 갤러리, 프로필)이 이미지를 잘 처리하지 않으면 실제 성능 문제를 겪을 수 있기 때문입니다.
대부분의 앱이 이미지를 표시하고 이를 잘 처리하는 것(올바른 로드와 크기, 해상도 변형, 특히 캐싱과 적절한 크기 조정이 있는 성능 최적화)이 UX(선명하고 매끄럽게 로드되는 이미지)와 성능(메모리 문제와 jank 회피) 모두에 영향을 미치므로, React Native에서 이미지와 에셋을 이해하는 것은 가치 있고 실용적으로 관련된 지식입니다 — 이미지를 표시하는 흔한 요구에 중요하며, 로드, 해상도, 특히 성능 최적화(캐싱, 크기 조정)를 이해하는 것이 매끄럽고 세련된 이미지 풍부한 앱을 만드는 데 핵심입니다.