react-native에서 이미지 다루기 (feat. FastImage, Image 컴포넌트의 차이)

 React-native로 개발하던 중 프로필 이미지 작업을 하다가 React-native에서 기본적으로 제공하는 Image 컴포넌트보다 성능을 최적화 할 수 있는 FastImage 컴포넌트에 대해서 알게 되었다.
 어떤 차이점이 있는지 살펴보고 어떤 상황에 어떤 컴포넌트를 사용하는 것이 좀 더 좋을지 고민해보자.

웹 성능최적화에서와 마찬가지로 프론트엔드에서 직접적으로 성능에 많은 영향을 미치는 것이 바로 이미지이다. 이미지를 효율적으로 로딩되도록 구현하여 성능을 최적화하는 것은 프론트엔드 개발자에게는 필수적인 덕목이다. 이러한 점에서 FastImage와 Image 컴포넌트를 비교해보자.

Image와 FastImage에 대한 각각의 공식문서 내용을 정리해보면 아래와 같다.

1. Image 컴포넌트
   • Image 컴포넌트는 React Native에서 기본적으로 제공되는 이미지 컴포넌트이다.
   • 장점:
     • 기본적인 이미지 로딩과 표시 기능을 제공하여 간단한 이미지 표시에 적합한다.
     • React Native의 핵심 기능으로 포함되어 있으므로 추가적인 패키지 설치 없이 사용할 수 있다.
   • 단점:
     • 성능 최적화 기능이 제한적입니다. 이미지 로딩 및 디코딩이 비교적 느릴 수 있다.
     • 추가 이미지 형식 지원에 제한이 있으며, GIF, WebP 등 일부 형식을 지원하지 않을 수 있다.
2. FastImage 컴포넌트
   • FastImage 컴포넌트는 react-native-fast-image 패키지를 사용하여 제공되는 컴포넌트이다.
   • 장점:
     • 이미지 로딩 및 성능 최적화에 특화되어 있어 빠른 이미지 로딩 속도를 제공한다.
     • 이미지 로딩 중에 로딩 스피너를 제공한다.
     • 이미지 캐싱 기능을 통해 이미지 로딩 시 네트워크 요청을 줄일 수 있다.
     • GIF, WebP 등 다양한 이미지 형식을 지원하여 더 다양한 이미지 표현이 가능하다.
   • 단점:
     • 추가 패키지 설치가 필요하므로 프로젝트에 의존성을 추가해야 한다.
3. 적절한 사용 사례
   • Image 컴포넌트:
     • 간단한 이미지 표시에 적합합니다. 로고, 아이콘 등과 같은 작은 이미지를 표시할 때 유용하다.
     • 프로젝트에서 이미지 로딩 속도나 성능 최적화가 크게 중요하지 않은 경우에 선택할 수 있다.
   • FastImage 컴포넌트:
     • 성능이 중요하거나 대용량 이미지, 움직이는 GIF, 다양한 이미지 형식을 지원해야 하는 경우에 적합하다.
     • 이미지 로딩 속도와 성능 최적화가 요구되는 프로젝트에서 선택할 수 있다.

정리해보면 이미지에 대한 최적화가 필요할 경우에 자동적으로 성능 최적화를 진행해주는 FastImage를 사용하면 되고 가벼운 프로젝트이거나 이미지에 대해서 크게 성능 최적화 할 필요가 없는 경우에는 의존성을 추가할 필요없이 Image 컴포넌트를 이용하는 것이 더 나을 수도 있다.