React Native 프로젝트 살펴보기

index.js

/**
 * @format
 */

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

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

프로젝트의 엔트리 파일입니다.

최상단의 @format 의 역할은 Prettier와 관련된 녀석임으로 지금당장은 중요하지 않으니 지워도 무방합니다.

 

App.js

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

import React from 'react';
...

const Section = ({children, title}): Node => {
...
};

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



export default App;

최초의 컴포넌트입니다.

상단에 @flow는 javascript파일을 정적 타입 분석기로 검사하겠다는 의미입니다.

javascript는 기본적으로 동적 타입 시스템입니다. 즉, Typescript 처럼 처리하겠다는 것인데, 이것을 사용하는 것 보다 추후에 typescript를 사용하는 것이더 낫습니다.

Flow보다 인지도도 높고, 커뮤니티도 더 크고, IDE지원이 더 훌륭하기 때문에요!

그러므로 필요없는 부분은 모두 지워주고 아래와 같이 간결하게 App컴포넌트 하나만 놔두고 다 지워줍니다

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

const App = () => {
  return (
    <SafeAreaView>
      <View>
        <Text>Hello Kong!!</Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

네이티브 프로젝트

각 환경을 위한 네이티브 프로젝트 파일들은 각각 ios, android 폴더에 위치하고있습니다.

ios 는 xcode 

android 는 android studio로 열 수 있습니다.

개발 초반부에는 각 파일을 수정할 일이 거의 없습니다.