Expo CLI를 이용한 React Native App

기운찬곰·2020년 9월 22일

react native

React Native

목록 보기

2/6

시작하기에 앞서서...

이 시리즈는 유데미의 React Native - The Practical Guide [2020 Edition] 강의를 듣고 정리한 글입니다.

🚀 Creating Our First React Native App

설치

Node 12 LTS 이상이 설치되어 있다고 가정하고 npm을 사용하여 Expo CLI 명령 줄 유틸리티를 설치할 수 있습니다.

$ npm install -g expo-cli

프로젝트 생성

그런 다음 다음 명령을 실행하여 "rn-first-app"라는 새 React Native 프로젝트를 만듭니다.

$ expo init rn-first-app

그럼 위에 처럼 나오는데 기본으로 black를 선택해주겠습니다.

실행

만들어진 프로젝트 디렉토리로 이동 후, npm start를 입력하면, 프로젝트가 실행됩니다.
프로젝트가 실행되면서 자동으로 expo dev tool 웹페이지가 열립니다.

휴대폰으로 연결

휴대폰에 'Expo'(ios) or 'Expo client'(Android) 어플리케이션을 다운받으면 개발하는 프로젝트를 폰으로 바로바로 확인해 볼 수 있습니다.

주의할점은 expo가 실행되고 있는 컴퓨터와, 휴대폰이 같은 인터넷으로 연결 되어 있어야 합니다.

아래는 결과화면입니다.

🌹 Working on Our First App

여기서 끝나면 재미없겠죠? App.js를 열고 조금만 조작해보겠습니다.

일단, App.js를 열어볼까요? 그러면 신기하게도 자바스크립트로 되어있으면서 리액트 구조와 매우 흡사하다는 것을 알 수 있습니다. 심지어 react 라이브러리를 사용하고도 있네요.

// App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

여기서 버튼을 한번 추가해보고, 버튼을 클릭하면 Text에 글자를 바꿔보도록 하겠습니다.

import React, { useState } from "react";
import { StyleSheet, Text, View, Button } from "react-native";

export default function App() {
  const [outputText, setOutputText] = useState(
    "Open up App.js to start working on your app!"
  );
  return (
    <View style={styles.container}>
      <Text>{outputText}</Text>
      <Button
        title="Change Text"
        onPress={() => setOutputText("The text changed!")}
      />
    </View>
  );
}

(...생략...)