[React-Native] 리액트 네이티브 배경이미지 (Image, ImageBackground)

 리액트 네이티브에는 Image를 넣는 요소가 두가지나 존재합니다.

 

한가지는 <Image></Image>를 사용하는 것이고 두번째는 <ImageBackground></ImageBackground>를 이용하는 것입니다.

 

두개의 요소가 무슨차이점이 있는가

 

사실... 차이점을 모르겠습니다. Image를 써도 ImageBackground를 써도 똑같이 동작하기 때문이죠

 

리액트 네이티브 문서에서는 이렇게 설명하고 있습니다.

 

웹에 익숙한 개발자의 일반적인 기능 요청은 background-image입니다. 이 사용 사례를 처리하기 위해 <ImageBackground>와 같은 소품을 가진 구성 요소를 사용하고 <Image>그 위에 하위 요소를 추가 할 수 있습니다.

 

라고 적혀있습니다. 허허 무슨말인지 모르겠네요. 그냥 이미지 위에 다른 요소들을 추가할 수 있다. 이런 말인거 같은데

이는 Image요소를 사용해도 똑같습니다. 이제 사용하는 방법을 한번 알아보죠

 

저는 이미지들을 assets이라는 폴더에 항상 저장합니다. 이를 참고하여 코드를 본다면

<Image source={require('../assets/sample.png')} resizeMode="cover">
 <View>
  <Text>이 글은 이미지 위에 적힙니다</Text>
 </View>
</Image>

이렇게 적은 것과

<ImageBackground  source={require('../assets/sample.png')} resizeMode="cover">
 <View>
  <Text>이 글은 이미지 위에 적힙니다</Text>
 </View>
</ImageBackground >

이렇게 적은것은 같은 결과를 가집니다.