리액트 네이티브에서 이미지 컴포넌트를 사용하는 방법은 무엇인가요?

1. 질문: React Native의 Image 컴포넌트란 무엇인가요?
답변: Image 컴포넌트는 네이티브 앱에서 이미지를 표시하기 위한 기본 UI 컴포넌트입니다. 로컬(asset) 이미지와 원격 URL 이미지를 모두 지원하며 스타일, 렌더링 모드(resizeMode) 등 다양한 옵션을 제공합니다.

2. 질문: Image 컴포넌트를 어떻게 임포트하나요?
답변:
```
import { Image } from 'react-native';
```

3. 질문: 로컬 이미지는 어떻게 사용하나요?
답변:
1. 프로젝트 내 `assets` 폴더 등에 이미지를 위치시킨 뒤 require로 불러옵니다.
예) ``
2. require 시 정적 리소스로 번들에 포함됩니다.

4. 질문: 원격 URL 이미지는 어떻게 사용하나요?
답변:
``
• 반드시 width·height를 지정해야 화면에 노출됩니다.

5. 질문: 스타일을 적용하거나 크기를 조절하려면 어떻게 하나요?
답변:
• style 프로퍼티로 일반 View 스타일 지정 방법과 동일하게 사용
예) ``
• flex 속성을 사용해 부모 크기에 맞추거나 AspectRatio를 유지할 수 있습니다.

6. 질문: resizeMode 속성은 무엇이며 어떤 옵션이 있나요?
답변:
• resizeMode: 어떻게 이미지를 컨테이너에 맞출지 결정
1) cover (기본) – 비율 유지하며 잘라내기
2) contain – 비율 유지하며 전체 보이기
3) stretch – 비율 무시하고 늘리기/줄이기
4) center – 원본 크기 중심 정렬
5) repeat – 패턴 반복
• 사용 예) ``

7. 질문: 로딩 중 플레이스홀더나 인디케이터를 표시하려면?
답변:
• React Native 기본 Image는 플레이스홀더 미지원.
• 대체 방법:
1) 로딩 상태(state)로 커스텀 뷰(onLoadStart, onLoad, onError) 노출
2) 써드파티 라이브러리(FastImage, react-native-image-progress) 활용
• 예)
```js
const [loading, setLoading] = useState(true);

{loading && }
source={{ uri }}
onLoadStart={() => setLoading(true)}
onLoad={() => setLoading(false)}
onError={() => setLoading(false)}
style={...}
/>
```

8. 질문: onLoad와 onError 이벤트 사용법은?
답변:
• onLoad(callback): 이미지 로딩 성공 시 호출
• onError(callback): 로딩 실패 시 호출
• onLoadEnd(callback): 성공·실패 후 항상 호출
• onLoadStart(callback): 로딩 시작 시 호출

9. 질문: 이미지 캐싱은 어떻게 하나요?
답변:
• iOS/Android 기본 캐싱 동작 차이가 있음
• 캐싱 옵션(source.cache) – iOS만 지원(“default”, “reload”, “force-cache”, “only-if-cached”)
• 고급 캐싱·플레이스홀더는 FastImage 라이브러리 추천
``

10. 질문: 이미지를 터치 가능하게 만들려면?
답변:
• Image를 직접 터치 이벤트 받지 못하므로 TouchableOpacity 등 래퍼 사용
예)
```



```

11. 질문: 성능 최적화를 위해 무엇을 고려해야 하나요?
답변:
• 적절한 크기의 이미지를 사용해 메모리 낭비 최소화
• resizeMode 조절로 오버드로우 방지
• FlatList/SectionList에서 onEndReached 직후 unmount 처리
• 써드파티 FastImage로 네이티브 수준 캐싱·렌더링

12. 질문: 원형 프로필 이미지 등 둥근 이미지는 어떻게 만들죠?
답변:
• style에 borderRadius를 width/2 또는 height/2로 지정
예)
``

13. 질문: GIF, 애니메이션 WebP 같은 포맷은 지원하나요?
답변:
• iOS: 기본 GIF 지원, Android: 안드로이드 9 이상 WebP 애니메이션 지원
• 전용 라이브러리(react-native-fast-image, react-native-webp-format 등) 사용 권장

14. 질문: 동적 경로의 로컬 이미지를 불러올 수 있나요?
답변:
• require는 정적 문자열만 지원.
• 동적 이름은 맵핑 객체를 만들어 key-value로 관리 후 source={images[name]} 방식 사용

15. 질문: SVG 아이콘은 어떻게 사용하나요?
답변:
• React Native는 SVG 파일 직접 지원 안 함
• react-native-svg, react-native-svg-transformer 설치 후
`import MyIcon from './icon.svg';`
`` 형태로 사용합니다.

리액트 네이티브에서 애플리케이션 아이콘을 변경하는 방법은 무엇인가요?

리액트 네이티브에서 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?

리액트 네이티브에서 이미지 컴포넌트를 사용하는 방법은 매우 간단하고 직관적입니다.

리액트 네이티브는 기본적으로 `Image` 컴포넌트를 제공하여 다양한 이미지 소스를 표시할 수 있도록 지원합니다.

아래에서는 `Image` 컴포넌트를 사용하는 방법에 대해 자세히 설명하겠습니다.

1. 기본 사용법 리액트 네이티브에서 이미지를 표시하려면 `Image` 컴포넌트를 import한 후, JSX 내에서 사용하면 됩니다.

기본적인 사용 예시는 다음과 같습니다.

```javascript import React from 'react'; import { View, Image, StyleSheet } from 'react-native'; const App = () => { return ( ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, image: { width: 200, height: 200, }, }); export default App; ```

2. 이미지 소스 `Image` 컴포넌트의 `source` prop은 이미지의 소스를 정의합니다.

소스는 다음과 같은 형식으로 지정할 수 있습니다.

- URL로부터 로드 : 위의 예시처럼 `uri` 속성을 사용하여 외부 URL에서 이미지를 로드할 수 있습니다.

```javascript source={{ uri: 'https://example.com/image.jpg' }} ``` - 로컬 이미지 : 로컬 이미지를 사용하려면 `require` 함수를 사용하여 이미지를 가져올 수 있습니다.

```javascript source={require('./path/to/local/image.png')} ```

3. 스타일링 `Image` 컴포넌트는 일반적인 스타일링 방법을 사용하여 크기, 위치 등을 조정할 수 있습니다.

`style` prop을 사용하여 CSS 스타일을 적용할 수 있습니다.

위의 예시에서 `styles.image`를 통해 이미지의 크기를 설정했습니다.



4. 이미지 크기 조정 리액트 네이티브에서는 이미지의 크기를 조정할 때 `resizeMode` prop을 사용할 수 있습니다.

이 prop은 이미지가 어떻게 조정될지를 결정합니다.

가능한 값은 다음과 같습니다: - `cover`: 이미지가 주어진 영역을 완전히 덮도록 크기를 조정합니다.

- `contain`: 이미지가 주어진 영역 안에 완전히 들어가도록 크기를 조정합니다.

- `stretch`: 이미지가 주어진 영역에 맞게 늘어납니다.

- `repeat`: 이미지가 반복되어 표시됩니다.

- `center`: 이미지를 중앙에 배치합니다.

예를 들어, `resizeMode`를 사용하는 방법은 다음과 같습니다.

```javascript ```

5. 로딩 상태 및 오류 처리 이미지를 로드하는 동안 로딩 상태를 표시하거나 오류가 발생했을 때 처리하는 방법도 중요합니다.

`Image` 컴포넌트는 `onLoad`, `onLoadEnd`, `onError`와 같은 이벤트 핸들러를 제공합니다.

```javascript console.log('Image loaded')} onError={() => console.log('Error loading image')} /> ```

6. 최적화 이미지를 최적화하는 것은 성능에 큰 영향을 미칠 수 있습니다.

다음과 같은 방법으로 최적화할 수 있습니다: - 적절한 이미지 크기 사용 : 사용자의 화면 크기에 맞는 이미지를 제공하여 불필요한 데이터 전송을 줄입니다.

- 캐싱 : 리액트 네이티브는 기본적으로 이미지를 캐시하지만, 외부 라이브러리를 사용하여 더 나은 캐싱 전략을 구현할 수 있습니다.



7. 리액트 네이티브에서 `Image` 컴포넌트를 사용하는 것은 매우 간단하며, 다양한 소스에서 이미지를 로드하고 스타일링할 수 있는 유연성을 제공합니다.

위에서 설명한 내용을 바탕으로 이미지를 효과적으로 사용하여 앱의 UI를 향상시킬 수 있습니다.