[react-native]리액트JS와의 차이점 (코어컴포넌트와 style)

리액트JS와의 차이점

컴포넌트

reactJs처럼 html 문법을 사용하지 못한다. 왜냐하면 브라우저가 아닌 네이티브기기를 사용하기 때문이다. 네이티브 기기는 DOM을 가지고 있지 않고 Html요소를 지원하지 않는다. 또한 컴포넌트를 쓸때마다 import를 해주어야 한다.

import {Text, View, Button} from 'react-native'

코어 컴포넌트

Text

텍스트는 무조건 <Text></Text> 사이에 들어가야 된다.

<Text>hello</Text>

View

div와 비슷한 용도로 쓰인다. 하지만 네이티브에선 유일한 컴포넌트를 담는 컨테이너 컴포넌트이다.

<View>
	<Text>hello</Text>
</View>

Button

기존에는 요소 사이에 텍스트를 배치했지만 (<button>BUTTON!</button>)

네이티브에서는 하나의 닫힌 컴포넌트 안에서 타이틀 프로퍼티를 사용해 텍스트를 입력한다 (<Button title=’ BUTTON!’/>)

<button>리액트js버튼</button>

<Button title=’리액트 네이티브 버튼’/>

---

css

마찬가지로 브라우저가 아니기 때문에 css언어가 없다. 그래서 컴포넌트의 프로퍼티를 이용해 인라인스타일을 적용하거나 styleSheet 객체를 이용하기도 한다.

바닐라 css에서 쓰이던 프로퍼티와 상이한 경우가 있다. 예를 들면 border같은경우 네이티브에선 없는 프로퍼티 이다. 대신 borderWidth, borderColor 등으로 쓰인다.

 

inline style

컴포넌트 안에 직접 스타일을 넣어준다.

<Text style={{color:'red'}}>hello</Text>

styleSheet 객체

보통 많이 사용하는 방법이다. jsx코드와 style코드를 명확하게 구별해주고 재사용 또한 가능하기 때문이다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between",
    backgroundColor: "#fff",
    padding: 20,
    margin: 10,
  },
});

//사용예시
<View style={styles.container}>
.
.