TIL-62, React-Native 문법의 차이점

React-Native와 React의 문법적 차이

React는 웹을 만드는 라이브러리로,

div, span, p등을 사용한다.

하지만, React-Native는 ‘웹’이 아닌 ‘앱’이기 때문에

해당 태그들을 사용할 수 없다.

또한, CSS역시 거의 모든 것을 사용할 수 있지만,

사용할 수 없는 소수의 몇가지, 그리고 사용 방식이 조금 다르다.

그럼, 어떤 부분들이 다른지 한번 알아보자.

1. View를 사용해야 한다.

div, span, p 등의 태그 대신

View 를 사용한다.

react-native로부터 import해서 사용해야 한다.

2. 모든 text는 Text Component 안에 들어있어야 한다.

React를 사용할 때는,

<div>Hello World</div> 라던가,

<span>Hello World</span> 와 같이 태그 안에 text(content)를 넣어서 사용했다.

(이 외에도 <h1>, <h2>, 등등 아주 여러가지 모든 것들 포함)

하지만, React-Native에서는 항상 <Text> Component 안에 들어있어야 한다.

왜냐? React-Native는 React가 만드는 ‘웹’이 아니기 때문.

3. CSS는 StyleSheet.create를 이용 or 객체 형식

나에게는 익숙한 Styled-Components와 약간 비슷한 형식이다.

in-Line style과 같이 사용할 수도 있지만,

Styled-Components와 같이 하나의 ‘선언’된 객체로 CSS Styling 할 수 있다.

예를 한번 보자.

...
<View style={styles.body}>
  <Text style={styles.text}>Hello World</Text>
</View>
...

const styles = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: "black",
  },
  text: {
    fontSize: 50,
    color: "blue",
  }
})

위와 같이, styles에 할당되어 있는 StyleSheet.create 객체가 있고,

그 객체를 View, Text등의 Components가 키&값으로 불러와 style을 사용한다.

이 때, 굳이 StyleSheet.create를 입력하지 않고 사용해도

문제는 없으나, StyleSheet.create를 입력해야 ‘자동완성’ 기능을 사용할 수 있으니

편리하게 작업하고 싶다면 입력해주는것이 좋다.

이제 in-line style를 살펴보자.

...
<View style=>
  <Text style=>Hello World</Text>
</View>
...

위와 같이, 태그 내에서 styling 해주는

in-line style 방식으로 CSS를 적용해 줄 수도 있다.

지금까지 배웠던 React, 그리고 html과 많은 것이 닮아 있고,

그리고 조금은 다른듯한 React-Native!

흥미롭다!! 어서 공부해서 무언가를 하나 만들어 보자!