study: 리네다기 | 1장 - ReactNative 프로젝트 파일 구성

엔트리 파일

index.js

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

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

index.js 파일은 프로젝트의 엔트리 파일로 리액트 네이티브 앱은 여기서 시작한다
import 구문을 통해 코드를 불러와 앱을 번들링 한다

코드 최상단 주석의 @format 키워드는 Prettier 와 관련되어 있다
Pritter 사용 시 --require-pragma 명령어 옵션을 설정하면
@format 키워드가 존재하는 파일만 처리한다

App 이라는 컴포넌트를 불러와 AppRegistry.registerComponent 함수를 사용해
네이티브 시스템에 해당 컴포넌트를 등록한다
이 작업을 통해 리액트 네이티브 컴포넌트를 화면에 보여준다

App 컴포넌트

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

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

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    (...)
  );
};

const styles = StyleSheet.create({
  (...)
});

export default App;

@flow 키워드는 해당 자바스크립트 파일을 FLow 라는 정적 타입 분석기로 검색하겠다는 의미
RN 으로 네이티브 프로젝트를 만들면 기본적으로 적용되어 있다

자바스크립트 언어는 기본적으로 동적 타입 시스템을 가지고 있다
동적 타입 시스템에서는 변수 선언 시 타입 지정을 하지 않아도 자동으로 지정해준다
FLow 를 사용하면 자바스크립트에서 정적 타입 시스템을 사용할 수 있다

// @flow
function square(n: number): number {
  return n * n;
}

square("2"); // Error!

Flow 를 사용하면 런타임이 아닌 개발 단계에서 실수를 바로 체크할 수 있어서 좋지만
Typescript 를 사용하는 것을 권장한다

타입 스크립트는 Flow 보다 훨씬 큰 커뮤니티, IDE 지원 등이 좋다
타입스크립트를 사용한다면 Flow 를 사용하지 않아도 되므로 비활성화 한다
@flow 키워드를 지우면 된다

리액트 네이티브 컴포넌트를 만들 때에는
import React form 'react'; 를 통해 React 를 꼭 import 해줘야 한다
그 다음 react-native 의 패키지를 불러온다

네이티브 프로젝트

각 환경을 위한 네이티브 프로젝트 디렉토리는 ios 와 android 디렉토리에 위치한다
ios 는 Xcode 로, android 는 안드로이드 스튜디오로 열 수 있다