[RN 공부] 리액트 네이티브를 다루는 기술 1장 정리

$ yarn <스크립트 이름>

• 스크립트 이름 부분에는 android, ios, start를 넣어 구동시키면 됨.

  • android : 안드로이드 환경에서 앱을 구동하는 스크립트

  • ios : iOS 환경에서 앱을 구동하는 스크립트

  • start : Metro를 구동하는 스크립트

    → Metro : 리액트 네이티브를 위한 자바스크립트 번들러로, 프로젝트에 사용된 자바스크립트 파일들을 모두 읽어서 올바른 순서로 하나의 파일로 합쳐주고 네이티브 앱에서 실행할 준비를 해 줌.

    android, ios 스크립트 사용 시 새로운 터미널에서 start 스크립트가 자동으로 시작되기 때문에 start 스크립트를 사용할 일은 드묾

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

• 프로젝트의 엔트리 파일 → 생성한 리액트 네이티브 앱은 이 파일에서 시작함.
• 이 곳에서 import 구문을 통해 코드를 불러오고 앱을 번들함.
• @format 이라는 키워드는 코드 스타일을 자동으로 정리해주는 preffier라는 도구와 관련 있음.

App.tsx

import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

• @flow 라는 키워드는 정적 타입 시스템을 사용하게끔 해 줌. → 변수, 파라미터, 함수의 반환값 등에 타입을 사전에 지정해 코드를 작성함
  
• 위의 코드들은 리액트 네이티브에 내장된 특별한 컴포넌트들로, StyleSheet는 컴포넌트를 스타일링해주는 API