React-Native 기본 태그

[Docs]

기존의 React 프로젝트 방식과는 다르게 Tag에 직접적으로 Class / ID를 부여할 수 없다.

React-Native 자체에서 제공하는 Tag들만 사용할 수 있다.

'react-native'에서 import 받아서 사용한다.

View

div 태그와 동일하게 Block 요소로 일정한 크기의 구역을 표시한다.
안에 문자를 넣을 수는 없다!
문자를 넣으려면 안에 Text 태그를 넣어서 쓰자

ScrollView

디바이스 높이보다 컨텐츠가 많아질 경우 아래로 스크롤해서 볼 수 있도록 해주는 block 태그이다.

import { ScrollView } from 'react-native'

return(
	<ScrollView>

	</ScrollView>
)

Text

문자를 입력할 수 있다. like span 태그

import { Text } from 'react-native'

return(
	<Text>이 곳에는 Text를 입력할 수 있습니다.</Text>
)

TextInput

• input 태그와 비슷하다.
• onChange 이벤트 가능
• value를 받아올 때는 event.nativeEvent.text

import { TextInput } from 'react-native'

const onChangeInput =(event)=>{
	console.log(event.nativeEvent.text)
}

return(
	<TextInput onChange={onChangeInput}/>
)

Image

• 이미지 주소는 source로 받아온다.
• 프로젝트 내 로컬 이미지일 경우 require로 지정해준다.
• 브라우저에서 이미지 주소를 받아올 때는 uri로 지정해준다.
• width/height 값을 지정해주지 않으면 이미지가 출력되지 않을 수 있다.

import { Image } from 'react-native'

return(
	<Image source={require('../public/images/codecamp.png')}
	<Image source={uri: 'https://reactnative.dev/img/codecamp.png'}
)

TouchableOpacity / Pressable

• 웹에서의 onClick 대신 앱에서는 onPress 이벤트를 사용한다.
• onPress 이벤트를 지원하는 다양한 태그들이 존재한다! 가장 많이 사용하는 태그가 요것들

1. TouchableOpacity

기존의 View 태그가 터치에 반응하도록 만들어진 block 요소이다.
onPress 이벤트가 발생하면 View의 불투명도가 감소해 흐리게 표시된다.

2. Pressable

광범위한 onPress 이벤트를 단계적으로 처리한다.(onPressIn, onPressOut 등)
눌러도 불투명도에 영향을 주지 않는다~

import { TouchableOpacity, Pressable } from 'react-native'

const onPressFuction=()=>{
 ...
}

return(
	<TouchableOpacity onPress={onPressFuction}><Text>Press Here</Text></TouchableOpacity>
	<Pressable onPress={onPressFuction}><Text>Press Here</Text></Pressable>
)