React Native 이미지 동적 호출 안 되는 이유

1. 문제 상황

React Native 개발 중 더미 데이터에 포함된 로컬 이미지 경로를 source에 그대로 할당했을 때 오류가 발생했다.

<Image source={require(data.img)} />

웹에서는 data.img를 그대로 넣어도 정상적으로 이미지가 표시되었지만,
React Native에서는 동작하지 않았다.

 

2. 웹에서는 왜 가능했을까?

웹에서는 이미지가 서버에 저장되어 있고,
브라우저가 런타임에 HTTP 요청을 통해 이미지를 로드했다.

<img src={data.img} />

 

3. React Native는 왜 다를까?

React Native는 로컬 자산을 빌드 시점에 번들에 포함했다.
RN 빌드는 Metro 번들러가 담당한다.

Metro Bundler 설명을 살펴보면

When bundling, each of the modules gets assigned a numeric id, meaning no dynamic requires are supported.
- Metro Deep Dives > Bundle Formats 일부 발췌

앱을 번들링 할 때 각 모듈은 숫자 ID를 할당받는다.
동적 호출은 빌드 시점에서 해석할 수 없기 때문에 정적 경로를 사용해야 했다.

 

4. 왜 파일이 존재해도 안 될까?

Metro는 코드에서 명시적으로 require 된 파일만 번들에 포함한다.
동적 경로는 정적 분석이 불가능하므로 번들 대상에서 제외된다.

 

5. 해결 방법

5-1. 로컬 이미지 정적 매핑

require는 정적으로 선언하고, 런타임에 선택하는 방식으로 해결할 수 있다.

const images = {
  0: require('../assets/image-1.png'),
  1: require('../assets/image-2.png'),
};

DATA.map(({ id }) => {
  return <Image source={images[id]} />;
});

5-2. 서버 이미지 사용

이미지를 서버에 업로드하고 URL을 사용하는 방법도 있다.

const DATA = [
  { id: 0, uri: "https://www.storage.com/image-1.png" },
  { id: 1, uri: "https://www.storage.com/image-2.png" },
];

DATA.map(({ uri }) => {
  return <Image source={{ uri }} />;
});

 

6. 정리

React Native는 실행에 필요한 자산을 빌드 시점에 번들에 포함해야 한다.
앱 실행 이후에 경로를 가져오는 동적 방식은 지원되지 않는다.

 

참고
- React Native Docs – Images
- Stack Overflow – Load dynamic assets in React Native
- Stack Overflow – How to dynamically render images using React Native
- Stack Overflow – React Native Image require module using dynamic names