React Native (2: RN 개발환경 구축)

React Native 개발 환경을 설정할 때, Create React Native App 방식을 사용하여 매우 빠르고 쉽게 진행할 수 있다. 다른 방법으로는 react-native init 명령어를 이용하여, React Native 와 그 Dependency 까지 전부 설치하여 사용할 수도 있다. 우선 이번에는 Create React Native App 방식을 사용하여 개발환경을 구축하였다.

 

 

 

npm install -g create-react-native-app

 

 

 

위 명령어를 통해 create-react-native-app 을 install 해준 후, 원하는 위치로 cd 한 이후 아래 명령어로 프로젝트를 생성한다.

 

 

 

create-react-native-app rn-first-project

 

 

result

 

 

 

위 파일들 중 App.js 에 실제 앱 코드가 들어있으며, 이를 수정하여 앱을 구성하면 되는 것이다.

 

 

이제 rn-first-project 경로로 cd 하여 npx expo start 명령어를 실행한다. 그럼 아래와 같은 화면이 나타난다.

 

 

 

result

 

 

 

앱을 확인하기 위해서는 iOS 나 안드로이드용 Expo 앱이 필요하다. 이를 설치한 이후 카메라로 QR 코드를 찍으면 방금 생성한 리액트 네이티브 앱이 스마트폰에서 실행된다. 단, 스마트폰과 컴퓨터가 서로 통신할 수 있도록 같은 네트워크에 접속되어 있어야 한다.

 

 

 

result

 

 

 

핸드폰에서 직접 화면도 확인해보았으니, 샘플 코드를 살펴보았다. 우선 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',
  },
});

 

 

 

이전에 React 로 작성했던 코드와 상당히 유사함을 알 수 있다. <div>, <span> 등의 태그 대신 <Text>, <View> 등을 사용한다는 점과 style 객체를 사용한다는 점이 큰 차이점으로 드러난다. 위처럼 React Native 의 모든 스타일은 스타일시트 대신에 스타일 객체를 통해 작성하게 된다. (StyleSheet 라이브러리를 활용하여 스타일 객체를 작성하는 것이 표준이라고 한다) 

 

 

 

다음 시간에는 날씨 API 를 활용한 날씨 앱을 직접 간단하게 작성해볼 예정이다.

 

 

 

 

 

 

Reference:

빠른 모바일 앱 개발을 위한 React Native