React Native(1) ≡ View, Text, Button, StyleSheet

import { StyleSheet, Text, View } from 'react-native';

React Native 코드를 보시면 이런 게 import돼 있는 걸 보실 수 있습니다.
웹에서 쓰던 리액트 문법과 달라서 이런 걸 쓰는데 무엇인지 하나하나 살펴봅시다.

View

View는 웹에 있던 div와 비슷한 역할을 하지만 실제로 React Native에서는
div, span 이런 것들을 쓰지 못하기 때문에 필수로 써야 하는 컴포넌트라 보시면 됩니다.

<View>
	{/* 넣을 코드 */}
</View>

<div>
	{/* 사용 시 오류 */}
</div>

Text

Text도 마찬가지로 span 이런 것과 비슷한 역할을 합니다. 문자는 반드시 이 컴포넌트를 사용해야 하며 그러지 않으면 오류가 발생합니다.

<Text>Hello, World!</Text>

<View>
	Hello, World! {/* 사용 시 오류 */}
</View>

Button

Button은 그냥 button이랑 비슷한 겁니다.
그런데 버튼에 있는 글자를 넣는 방식이 좀 특이하죠. title='(내용)' 이렇게 씁니다.

<Button title='Hello' />

물론 Text에서 설명했던 것처럼 <Button>(내용)</Button> 이렇게는 쓸 수 없습니다.

StyleSheet

StyleSheet는 웹에서 styled-components 쓴 분은 아시겠지만 굉장히 유사해 보입니다. 그런데 StyleSheet 자체는 굳이 쓸 필요는 없고 자동 완성하기에 용이한 거라 보시면 됩니다. 그냥 객체를 보내도 잘 작동합니다.

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  }
});

이것도 되고요

const styles = {
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  }
};

이것도 됩니다.

<ScrollView style={
    {
    marginTop: 32,
    paddingHorizontal: 24,
  }
}>

심지어 이것도 됩니다.

CSS 문법 비슷한 것도 어느 정도의 규칙이 있습니다. 웹에선 background-color 이렇게 썼다면 backgroundColor 이렇게 씁니다. 그리고 일부 가져오지 못한 문법도 있습니다. border 같은 거요.