React Native 프로젝트 살펴보기

이전 글에는 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);

index.js 파일은 프로젝트의 엔트리 파일이다. 생성한 리액트 네이티브 앱은 이 파일에서 시작한다.

여기서 import 구문을 통해 코드들을 불러와 앱을 번들링 한다.

위에 코드는 App이라는 컴포넌트를 불러와서 AppRegistry.registerComponent라는 함수를 사용해 ㄴ이티브 시스템에 해당 컴포넌트를 등록한다. 이 작업을 해줘야 리액트 네이티브 컴포넌트를 화면에 보여줄 수 있다.

App 컴포넌트

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

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

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


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

export default App;

 

상단의 @flow라는 키워드는 이 자바스크립트 파일을 Flow라는 정적 타입 분석기로 검사하겠다는 의미다.

리액트 네이티브에는 기본적으로 Flow가 적용되고 있는데 Flow보다 TypeScript가 높은 인지도, 큰 커뮤니티, IDE 지원이 좋기 때문에 TypeScript를 사용하는 것을 권장한다.

아마 Flow를 사용하는 코드는 빨간줄이 나올것이다. TypeScript를 사용하려면 아래와 같이 코드를 변경한다.

import type {Node} from 'react'; // 해당 코드 제거

const App = () => {
  return (
    ...
  );
};

 

맨 위에는 React를 불러오는 코드가 있다. 리액트 컴포넌트를 만들 때는 이 코드를 꼭 넣어줘야 한다.

import React from 'react';

 

그 다음에는 react-native 패키지를 불러오는 코드가 있다. 아래 컴포넌트들은 React Native에 내장된 컴포넌트다.

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

 

최 하단에는 컴포넌트를 내보내는 코드가 있다. 컴포넌트를 내보내면 다른 파일에서 블러와서 사용할 수 있다.

export default App;