[리액트 네이티브] react-native react와의 태그 비교

react와 react-native의 차이점

리액트는

페이스북에서 만든 프론트엔드 javascript 라이브러리

​

리액트 네이티브는

react의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈소스 프레임 워크

​

​

리액트 네이티브는 html문법을 사용하지 않는다

​

그래서 이번 포스팅에서는 이것을 다룰것이다

​

html은 많이 있는데

기본의 css도 지원하지 않는다

​

일단 대표적인 태그들을 비교해보겠다

 

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

 

태그가 다르다

이부분도 꼭 기억해줘야한다!

헷갈리면 안돼,,,!

​

​

<StatusBar/>

상태바를 조작할 수 있다!

style을 조작하여 상태바를 조절할 수 있다

 

https://docs.expo.dev/versions/latest/sdk/status-bar/

StatusBar

 

 

 

 

이렇게 바뀐다!

​

css

css는

각 컴포넌트에서 따로 관리할 수 있다!

 

 

const styles = StyleSheet.create({
container : {
flex:1,
},

});

이런 식으로

<SafeAreaView style={styles.container}>
<View>hello</View>

 

태그에서 style을 적용 시켜줄 수 있다!!

​

​

css는 이후에 뭔가 공부하게 되면 추가 하겠다!