리엑트 네이티브 개발환경 설정하기

리엑트 네이티브

리엑트 네이티브는 자바스크립트로 iOS/Android 네이트브앱을 개발할 수 있게 도와주는 도구입니다.

Watchman, Flow 설치

1
2
brew install watchman
brew install flow

리엑트 네이티브 CLI 설치

1
npm install -g react-native-cli

리액트 네이티브 앱 만들기

1
2
3
react-native init HelloWorld
cd HelloWorld
npm install

실행

1
react-native run-ios

수정

App.js 를 열고 파일을 수정할 수 있습니다.

그 후 에뮬레이터에서 cmd + R 을 누르면 수정된 부분이 반영됩니다.

크롬 디버거

iOS simulator 에서 크롬 디버거를 통해 콘솔로그 등 작업을 할 수 있습니다.

  1. iOS simulator에서 Command + D를 누름
  2. Dedub JS Remotely 선택

Expo 설치

리엑트 네이티브를 사용하기 위해서는 Expo라는 개발도구가 필요합니다.
Expo다운로드 링크: https://xde-updates.exponentjs.com/download/mac
Expo를 다운받아 실행 후 로그인까지 하면 위에서 설치한 AwesomeProject를 보실 수 있습니다.

에뮬레이터 설치

리엑트 네이티브로 개발시 웹에서처럼 live-reload기능이 제공됩니다.
데스크탑에서 개발하기 위해서 iOS simulator / Genymotion 설치합니다.
핸드폰에서도 Expo Client(iOS/Android)앱을 설치하면 개발하면서 바로 확인이 가능합니다.

에뮬레이터 실행

AwesomeProject를 클릭 후 제일 오른쪽에 있는 Device를 클릭합니다.
Open on iOS Simulator / Open on Android를 클릭하면 위에서 설치한 Simulator에서
iOS/Android용 AwesomeProject 앱이 실행됩니다.

App.js 수정

/AwesomeProject/App.js 파일을 열고 React Native Test 코드를 추가해 줍니다.
그러면 자동으로 에뮬레이터에 반영되는 모습을 볼 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Text>React Native Test</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

네이티브 코드로 프로젝트 빌드

의존성 설치

1
2
3
brew install node
brew install watchman
npm install -g react-native-cli

React Native Application 생성

1
react-native init AwesomeProject

React Native Application 실행

1
2
cd AwesomeProject
react-native run-ios

resource