728x90
반응형
SMALL
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
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
docs.expo.dev
이렇게 바뀐다!
css
css는
각 컴포넌트에서 따로 관리할 수 있다!
const styles = StyleSheet.create({
container : {
flex:1,
},
});이런 식으로
<SafeAreaView style={styles.container}>
<View>hello</View>
태그에서 style을 적용 시켜줄 수 있다!!
css는 이후에 뭔가 공부하게 되면 추가 하겠다!
반응형
'프론트 > React Native, React' 카테고리의 다른 글
| [리액트네이티브] react-native QR코드, 바코드 인식 (0) | 2023.06.26 |
|---|---|
| [리액트네이티브] react-native stack navigation 넘어가면 초기화하기 (3) | 2023.06.26 |
| [리액트 네이티브]react-native 함수 컴포넌트 불러오기 (0) | 2023.06.26 |
| [리액트 네이티브]react-native 현재위치 가져오기 (0) | 2023.06.26 |
| [리액트네이티브] react-native QR code (0) | 2023.06.19 |