이미지는 모바일 애플리케이션에 많은 가치를 제공합니다. 개념을 설명하고, 정보를 전달하고, 시각적 흥미를 유발하고, 앱 사용자가 놓치지 않기를 바라는 특정 콘텐츠에 대한 컨텍스트를 제공하는 데 도움이 될 수 있습니다.
React Native 이미지 컴포넌트
React Native 이미지 컴포넌트는 모바일 앱에서 이미지를 렌더링하기 위해 React Native 라이브러리에서 제공하는 기본 컴포넌트입니다. 이 컴포넌트는 로컬 및 원격 소스 모두에서 이미지를 로드할 수 있습니다. 렌더링된 이미지의 커스터마이징과 스타일링을 위한 몇 가지 소품을 제공합니다.
애플리케이션에서 이미지 컴포넌트를 사용하려면 react-native 라이브러리에서 이미지를 가져옵니다:
import React from 'react';
import { StyleSheet, Image, View } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Image
style={styles.image}
source={require('./assets/my-image.jpg')}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
image: {
width: 200,
height: 200,
borderRadius: 100,
},
});
위는 이미지가 있는 간단한 앱 컴포넌트입니다. Image 컴포넌트는 이미지의 너비, 높이, 테두리 반경을 설정하는 스타일 프로퍼티를 받습니다. 또한 앱 디렉터리 내의 “assets” 폴더에 있는 로컬 파일에서 이미지를 로드하는 소스 프로퍼티도 필요합니다. 소스 프로퍼티는 포함할 이미지의 경로를 정의하며 로컬 및 네트워크/원격 이미지 소스를 모두 허용할 수 있습니다.
로컬 이미지는 사용자의 디바이스에서 사용할 수 있으며 임시 또는 영구적으로 저장할 수 있습니다. 에셋 폴더와 같은 앱의 프로젝트 디렉토리 내에 로컬 이미지를 저장할 수 있습니다. 또한 기기의 카메라 롤이나 사진 라이브러리와 같이 앱의 디렉토리 외부에서 이미지를 찾을 수도 있습니다. 다음은 로컬 이미지의 소스 경로의 예입니다:
<Image source={{ uri: 'file:///path/to/my-image.jpg' }} />
네트워크 이미지는 웹을 통해 전달됩니다. 여기에는 HTTP/HTTPS URL 또는 Base64 인코딩 체계를 사용하여 URL에 직접 데이터를 임베드하는 base64 인코딩 데이터 URI가 포함될 수 있습니다.
이미지 컴포넌트를 사용자 정의하는 소품
React Native 이미지 컴포넌트의 스타일을 지정하고 사용자 정의하는 데 사용할 수 있는 몇 가지 소품이 있습니다.
resizeMode
resizeMode 프로퍼티는 React가 컨테이너 내에서 이미지의 크기를 조정하고 배치하는 방법을 결정합니다. resizeMode에 사용할 수 있는 값은 여러 가지가 있으며, 각 값은 이미지에 다르게 영향을 미칩니다.
⭐ cover: 이 값은 이미지의 크기를 균일하게 조절하여 두 치수가 포함 요소보다 크거나 같도록 합니다. 그러면 이미지가 컨테이너 내에서 중앙에 배치됩니다. 이 값을 사용하면 가로 세로 비율을 유지하기 위해 이미지가 잘릴 수 있습니다.
⭐ 포함: 이렇게 하면 컨테이너의 크기 내에 이미지를 완벽하게 맞추고 중앙에 배치합니다. 그러나 이로 인해 이미지 가장자리 주변에 빈 공간이 생길 수 있습니다.
⭐ 늘이기: 스트레치 값은 가로 세로 비율에 관계없이 전체 컨테이너를 채우도록 이미지를 늘립니다. 때때로 이미지가 왜곡될 수 있습니다.
⭐ 반복: 이 값은 이미지를 가로 및 세로로 반복하여 전체 컨테이너를 채웁니다.
⭐ 가운데: 이미지의 크기를 조정하지 않고 컨테이너 요소 내에서 이미지를 중앙에 배치합니다.
onLoad
이미지 로딩이 완료되면 실행되는 콜백 함수입니다. 이미지가 로드된 후 컴포넌트의 상태를 업데이트하거나 사용자에게 메시지를 표시하는 등의 작업을 수행하는 데 사용할 수 있습니다.
onError
이미지 로딩에 실패할 때 또는 이미지가 로드되지 않을 때 onError 프로퍼티가 실행됩니다. 이미지 로드를 시도하는 동안 오류가 발생하면 필요한 작업을 수행할 수 있는 방법을 제공합니다. 사용자에게 오류 메시지를 표시하거나 이미지 로드를 다시 시도할 수 있습니다.
defaultSource
이 프로퍼티는 기본 이미지가 로드되지 않을 경우 표시할 폴백 이미지를 지정합니다. 기본 이미지가 로드되는 동안 기본 이미지 또는 플레이스홀더 이미지를 제공하는 데 사용할 수 있습니다.
API에서 원격 이미지 처리하기
API 또는 원격 서버에서 애플리케이션의 이미지를 가져와서 앱 내에 표시해야 할 수 있습니다. 이를 위해 내장된 React 불러오기 함수 또는 Axios와 같은 API 요청 라이브러리를 사용할 수 있습니다.
다음은 fetch 함수를 사용하여 원격 API에서 이미지를 가져와 표시하는 방법의 예시입니다:
const [imageUri, setImageUri] = useState(null);
useEffect(() => {
fetch('https://example.com/api/images/1')
.then(response => response.json())
.then(data => setImageUri(data.url))
.catch(error => console.error(error));
}, []);
return (
<View>
{imageUri ? (
<Image source={{ uri: imageUri }} />
) : (
<Text>Loading...</Text>
)}
</View>
);
앱 내에서 이 코드를 실행하면 설정된 원격 API 링크에서 이미지를 가져옵니다. 이 예제에서는 먼저 imageUri에 대한 상태 변수를 생성합니다. 사용 효과 후크 내에서 fetch 함수는 imageUri를 검색하고 setImageUri()를 사용하여 상태 변수에 저장합니다.
마지막으로 로딩 표시기가 표시되는 동안 이미지가 표시되기를 기다리는 동안 이미지의 URI로 설정된 소스 소품이 있는 이미지 컴포넌트를 렌더링합니다.
캐시 정책 프롭을 사용하여 캐시 동작 제어
브라우저는 원격 URL에서 로드하는 이미지를 캐시할 수 있으므로 나중에 이미지를 다시 빠르게 로드할 수 있습니다. 캐시 프롭을 사용하여 캐시된 이미지의 동작을 사용자 지정할 수 있습니다. 이 프로퍼티는 브라우저가 이미지를 캐시하는 방법과 해당 캐시를 무효화하는 방법을 지정할 수 있습니다.
캐시 프로퍼티는 기본값, 다시 로드, 강제 캐시 및 캐시된 경우에만 등의 값을 사용할 수 있습니다.
다음은 캐시 프로퍼티를 사용하여 이미지의 캐시 동작을 제어하는 방법의 예시입니다:
<Image
source={{
uri: 'https://example.com/images/my-image.png',
cache: 'force-cache',
cacheKey: 'my-image',
immutable: true
}}
/>
캐시 속성이 ‘force-cache’로 설정되어 있으며, 이는 캐시 버전이 오래되었더라도 사용 가능한 경우 브라우저가 캐시에서 이미지를 로드해야 함을 나타냅니다.
새로운 소품 캐시 키도 여기에 사용됩니다. ‘내 이미지’로 설정되어 나중에 캐시된 이미지를 참조하는 데 사용할 수 있는 사용자 정의 캐시 키 역할을 합니다.
또한 불변 속성이 true로 설정되어 있어 브라우저가 이 캐시 항목을 불변으로 취급하고 무효화하지 않도록 합니다.
이미지에 관한 모든 것
React Native Image 컴포넌트는 스타일링, 원격 이미지 처리, 캐시 동작 제어 등 이미지를 표시하기 위한 강력하고 유연한 수단을 제공합니다.
원격 이미지의 경우, 원격 이미지가 로드되는 동안 항상 플레이스홀더를 사용해 임시 이미지나 텍스트를 표시할 수 있습니다. 이렇게 하면 즉각적인 시각적 피드백을 제공하고 앱이 응답하지 않는 것처럼 보이는 것을 방지하여 더 나은 사용자 환경을 만들 수 있습니다.