React Native 와 Expo 연동하여 맥 환경에서 ios 애뮬레이터 실행해보기

Expo 는 말대로 무료이며 오픈소스이고, React 와 JavaScript 를 사용하여 ios 그리고 안드로이드를 native 하게끔 도와주는 것이라고 생각하면 됩니다. 

사이트 주소는 https://expo.io/ 입니다. 우선 회원가입을 합니다.

로그인을 하면 Tools 라는 메뉴가 있습니다.  이를 선택하시고, 5가지 아이콘 중에 목록중에 XDE 를 선택합니다.

화살표에 표기되어 있는 download from github 를 선택하여 사이트 이동합니다.

맥북이면 xde-2.22.1.dmg 를 다운받아 설치하며, 윈도우라면 xde-setup-2.22.1.exe 파일을 다운로드 받습니다.

다운로드 받아 설치한 다음 응용프로그램에서 실행합니다.

여기서 신규 생성을 하고자 한다면 Create new project 를 선택합니다.

프로젝트 폴더 및 이름을 설정합니다.

생성한 프로젝트에 맞게 설치를 하게 됩니다.

ios 환경이라면 open on ios simulator 를 선택합니다. xcode 가 설치 되어 있다면 ios 애뮬레이터가 실행됩니다.

처음에 실행할때 오래 걸리더군요 . ^^

애뮬레이터 하단에 보면 javascript bundling 하는게 보입니다. 

x 버튼을 누르면 실행된 화면을 보실 수 있습니다.

참고로 개발할때 변경된 내용은 자동적으로 애뮬레이터가 갱신해서 화면을 보여줍니다. 이 부분이 정말 짱이네요.~ 

react native 코드 실행한 내용을 보실 수 있습니다.

위의 데모를 실행한 코드 입니다. react 의 문법과 javascript 언어만 알아도 금방 개발을 native 환경에 맞게 구현이 가능합니다.

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>나는 한국인이다. i love you!!! 휴대폰이 더 빨러...</Text>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

});