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

const SampleApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
      <Text>Hello, World!</Text>
    </View>
  )
}
export default SampleApp;

<aside> 💡 import React from 'react';

</aside>

(각 플랫폼에 맞는 네이티브 컴포넌트로 변환될 JSX 를 사용하기 위해 React import

<aside> 💡 import {Text, View} from 'react-native';

</aside>

react-native 에서 Text, View 컴포넌트를 import

• 함수형 컴포넌트이면서 웹에서의 리액트와 같은 방식으로 동작하는 SampleApp 함수

• 이 함수는 View 컴포넌트를 리턴함

• View 컴포넌트는 Text 를 자식으로 가지고 있고 style 도 적용되어있음

• View 의 스타일 지정 (flex, justifyContent, alignItems)

  • <View> 는 <div>, <span> 같은 역할 (like constraintLayout)
  • flex
    • 각각의 요소들이 세로축을 따라 사용가능한 공간에 어떻게 ‘채워지는지' 정의
  • justifyContent
    • 컨테이너의 자식 컴포넌크를 컨테이너의 세로축 중앙 정렬
  • alignItems
    • 컨테이너의 자식 컴포넌트들을 컨테이너의 가로축 중앙 정렬

• 안에 Text 태그 지정 (TextView 같은 건가봄)

  • <Text> 는 텍스트를 표시하는 코어 컴포넌트

해당 코드는 SampleApp 이라는 새로운 컴포넌트를 정의

→ 즉 리액트 네이티브 앱을 만든다는 것은 수많은 새로운 컴포넌트를 만드는 것을 의미

Props