RN_require

❌ <Image source={require(item.img)} /> 이렇게 하면 안 되는 이유

React Native에서는 require()가 컴파일 타임에 실행되기 때문에 이렇게 동적으로 사용할 수 없음.

---

1️⃣ 왜 require(item.img)이 안 될까?

• require()는 정적인 값만 받을 수 있음 → 즉, 문자열 변수로는 사용할 수 없음

• 컴파일할 때 require()가 실행되어야 하는데, item.img는 런타임(실행 시점)에 결정됨

• React Native의 이미지 로더가 정적인 require()만 인식할 수 있음

---

2️⃣ 해결 방법: source={{ uri: item.img }} 사용하기

require() 대신 uri 방식을 사용하면 동적으로 이미지를 불러올 수 있음.

<Image source={{ uri: item.img }} style={styles.image} />

✅ 예제 코드 (URL 이미지 사용)

const DATA = [
  { id: '1', name: '우유', img: 'https://example.com/milk.png' },
  { id: '2', name: '당근', img: 'https://example.com/carrot.png' },
];

const renderItem = ({ item }) => (
  <View>
    <Image source={{ uri: item.img }} style={styles.image} />
    <Text>{item.name}</Text>
  </View>
);

• 이 방식의 장점:
  ✅ 원격 URL이므로 네트워크에서 이미지를 가져올 수 있음
  ✅ item.img 값이 동적으로 변경 가능

---

3️⃣ 로컬 이미지라면? require()를 미리 정의해야 함

만약 로컬 이미지를 사용해야 한다면, 미리 require()를 적용해야 함.

✅ 예제 코드 (로컬 이미지)

const DATA = [
  { id: '1', name: '우유', img: require('./assets/milk.png') },
  { id: '2', name: '당근', img: require('./assets/carrot.png') },
];

const renderItem = ({ item }) => (
  <View>
    <Image source={item.img} style={styles.image} />
    <Text>{item.name}</Text>
  </View>
);

• 이 방식의 특징:
  ✅ require()가 컴파일 타임에 실행되므로 정상 동작
  ❌ item.img를 동적으로 변경할 수 없음

---

📢 최종 정리

방법	사용 가능 여부	설명
<Image source={require(item.img)} />	❌	require()는 변수로 동작 안 함
<Image source={{ uri: item.img }} />	✅	URL 이미지 가능 (동적 이미지 사용)
<Image source={require('./assets/milk.png')} />	✅	로컬 이미지는 정적으로만 가능
const images = { milk: require('./milk.png') }; <Image source={images[item.img]} />	✅	객체 매핑 방식 사용 가능

---

결론

• URL 이미지: source={{ uri: item.img }} 사용 ✅
• 로컬 이미지: require()를 미리 정의하고 사용 ✅
• require()는 동적으로 사용 불가 → item.img처럼 변수를 사용할 수 없음 ❌