1-3 [React Native] 프로젝트 살펴보기

실행을 하게 되었다면 아이폰과 안드로이드 폰에서 이런 화면이 나올 것입니다.

 

그 이전에 책에선 App.js라고 되어있지만 저는 .tsx로 되었습니다.

 

리팩토링으로 확장자 고쳐주시면 됩니다. 어차피 안에 있는건 다 지울거라서 괜찮습니다.

 

/**
 * @format
 */

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

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

이러한 코드가 있고 리액트를 조금 맛본 필자가 보기엔 리액트랑 같다고 생각했습니다.

 

index.js는 엔트릴 파일이고 이 곳에서 시작하여 import를 통해 앱을 번들링하게 되는 것입니다.

/**
 * 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;

App.js 파일을 열어보면 이렇게 되어있습니다.

 

파일 최상단의 @flow는 정적타입분석기라고 하는데 저희는 나중에 TypeScript를 사용할 것이기 때문에 삭제하셔도 됩니다.

 

그 후에 변경해주셔야 할 곳이 있습니다.

 

const App: () => Node = () => { 

 

이 부분을 수정해주셔야합니다.

const App () => {

이런식으로 수정해주시면 됩니다.

 

차근차근 살펴 보자면,

import React from 'react';

 

이 코드는 리액트를 불러오는 코드인데 필수적으로 넣어주어야 합니다.

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

이 코드들은 리액트 네거티브 내장된 특별한 컴포넌트 들입니다.

SafeAreaView는 아이폰에서 자주 사용되는 코드이며 화면을 노치 안으로 들어올 수 있게 해주고

StyleSheet은 웹에서 CSS를 담당하는 코드라고 생각하시면됩니다.

추후에 사용해보면서 익히면 될 것 같습니다.

export default App;

최 하단에 있는 이 코드는 index.js에서 import하기 위해선 필수적으로 작성해야 합니다.

 

---

이렇게 대충 살펴 보셨다면 App.js의 코드를 수정해주세요.

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

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

export default App;

이렇게 되었다면 성공입니다!