내일배움캠프 10주차 TIL (10-2 reactnative 태그)

YOOYOUNGJAE 2023. 1. 4. 10:26

728x90

React Native Component

우선 React Native 공식 문서에서 발췌한 아래의 이미지를 참고해보자.

다양한 <View> 태그와 <Text> 태그, <Image> 태그가 기본 네이티브 컴포넌트로 제공되고 있다는 것을 알 수 있다. 그럼 이제 이 컴포넌트들이 우리가 기존에 알고 있던 HTML, React의 그것과 어떻게 달라졌는지, 무엇과 비슷한지 비교하여 알아보도록 하겠다.

일반적인 HTML, 웹 요소

<div>, <p>, <span>, <a>, <li>, <ul>, <ol>, <img> 등

리액트 네이티브 컴포넌트

<View>, <Image>, <Text>, <FlatList> 등

HTML의 요소와 비슷하게 매핑되는 네이티브 컴포넌트를 표로 정리하면 다음과 같다.

HTML	React Native
div	<View>
img	<Image>
span, p	<Text>
ul/ol, li	<FlatList>

<View>

모바일 앱 UI의 가장 기본 단위라고 생각하면 된다. 아까 위의 사진에서 보았듯, 모든 컴포넌트의 아래에는 View가 깔려있다.

리액트 네이티브 공식 문서에서는 View를 다음과 같이 설명하고 있다.

View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls.
View는 flexbox, style, 터치 다루기와 접근성 제어와 같은 레이아웃을 지원하는 컨테이너 입니다.

한마디로 모바일 앱 각 요소의 가장 기본적인 단위라고 볼 수 있다.

<Text>

텍스트를 입력할 수 있는 유일한 컴포넌트이다. HTML에서는 <div>이든 <p>이든 어디에나 플레인 텍스트를 입력할 수 있었다. 그러나 리액트 네이티브를 포함한 모바일 앱 개발에서는 웹과 텍스트 렌더링 방식이 다르다. 그렇기 때문에 리액트 네이티브에서는 자식요소로 플레인 텍스트를 입력할 수 있는 유일한 컴포넌트로 <Text>를 만들었다.

<Text> Right </Text>

<View> Wrong </View>

위와 같이 Text 내에는 일반 플레인 텍스트를 입력할 수 있지만, 이를 제외한 View와 같은 태그 내에 플레인 텍스트를 입력했다가는 오류를 맞이하게 될 것이다. 만약 <View> 내에 플레인 텍스트를 입력하고 싶다면 <View>의 자식요소로 <Text>를 추가하여 그 안에 플레인 텍스트를 입력해주면 되겠다.

<Image>

Image는 우리가 알고있던 HTML의 <img> 태그와 비슷하다. source 속성을 이미지 경로와 함께 입력하여 불러올 수 있다. 다만 한가지 다른 점은, HTML에서는 css 속성으로 background-image 를 이용하여 이미지를 하나의 요소가 아닌 요소의 스타일 속성으로 지정할 수 있었는데 리액트 네이티브는 그렇지 않다는 것이다. 리액트의 핵심은 모든 것의 컴포넌트화이므로, 요소의 속성으로 이미지를 지정하지 않는다.

만약 한 컴포넌트의 배경 속성으로써 이미지를 삽입하고 싶다면, 다음과 같이 코드를 작성하면 된다.

<Image style={{height:'100%',width:'100%',resizeMode:'cover'}}
	source={require("이미지경로")}>

style 속성의 resizeMode를 이용하면 이미지의 비율을 어떻게 적용할 것인지 설정할 수 있다.

728x90