📢 컴파일 타임 vs 런타임의 차이
컴파일 타임과 런타임은 코드가 실행되는 시점이 다르기 때문에, require(item.img)처럼 변수를 사용할 수 없는 경우가 발생하는 것.
1️⃣ 컴파일 타임 (Compile Time)
💡 코드가 실행되기 전에, 앱을 빌드하는 과정
- 코드를 해석하고 에러를 체크하는 단계
- 정적인 값들은 이때 결정됨
require()는 이 단계에서 실행됨
예제
const milk = require('./assets/milk.png'); // ✅ 가능 (정적 경로)
✅ 컴파일 타임의 특징
✔️ 코드 오류를 사전에 감지
✔️ 정적인 값이 결정됨
✔️ 실행 전에 코드가 최적화됨
1️⃣ 2️⃣ 런타임 (Runtime)
💡 앱이 실행될 때 발생하는 동작
- 사용자의 입력을 받고, 데이터를 불러오고, 화면을 렌더링하는 단계
- 동적인 값이 결정되는 시점
item.img같은 동적인 변수는 이때 결정됨
예제 (런타임에서 결정되는 값)
const item = { img: './assets/milk.png' }; require(item.img); // ❌ 안 됨 (런타임에 결정되므로)
✅ 런타임의 특징
✔️ 코드가 실제로 실행되는 단계
✔️ 사용자 입력에 따라 값이 바뀜
✔️ 동적인 데이터 처리 가능
3️⃣ require()가 변수로 안 되는 이유
<Image source={require(item.img)} /> // ❌ 동작 안 함🚨 왜 안 되는가?
require()는 컴파일 타임에 실행되어야 함- 하지만
item.img는 런타임에 결정되는 값 - 컴파일 타임에
require()가 실행될 때,item.img가 아직 어떤 값인지 모름
✅ 정적(컴파일 타임)일 때는 가능
<Image source={require('./assets/milk.png')} /> // ✅ 정상 작동✅ 동적(런타임)일 때는 uri 사용
<Image source={{ uri: item.img }} /> // ✅ URL 사용 가능📢 최종 정리
| 개념 | 설명 |
|---|---|
| 컴파일 타임 | 코드 실행 전, 앱을 빌드하는 단계 (정적인 값만 가능) |
| 런타임 | 앱이 실행된 후 동작하는 단계 (동적인 값 가능) |
require() | 반드시 컴파일 타임에 실행되어야 함 → 변수 사용 불가 ❌ |
uri 사용 | 런타임에서도 동작 가능 → 동적 이미지 처리 가능 ✅ |
