2장 리액트 네이티브 시작하기

리액트 네이티브는 macOS, Windows, Linux 환경에서 개발 가능 (윈도우를 기준으로 작성)

2.1 개발 환경 준비하기

설치 필요 : Node.js, JDK, 안드로이드 스튜디오(Android Studio), 파이썬, 에디터(VS Code)

 

안드로이드 스튜디오 설치

• 안드로이드 스튜디오 설치 시 Install Type에서 Custom으로 선택 후 SDK Component Setup 화면에서 아래 목록들을 선택하고 실행
  • Android SDK / Android SDK Platform / Performance (Intel ® HAXM) / Android Virtual Device
• SDK Manager > Languages & Frameworks > SDK Platforms 에서 Intel x86 Atom_64 System Image 추가 설치

 

• 환경 변수 설정

사용자 변수	ANDROID_HOME	%LOCALAPPDATA%\Android\Sdk
시스템 변수	Path	%LOCALAPPDATA%\Android\Sdk\platform-tools

• cmd에 adb --version로 잘 설정되었는지 확인

 

에뮬레이터 설치

Virtual Device Manager > Create Virtual Device를 통해 Pixel 3(x86 Images)를 추가함.

---

2.2 리액트 네이티브 프로젝트 만들기

리액트 네이티브를 생성하는 방법

1. Expo
2. 리액트 네이티브 CLI

 

1. Expo

: 리액트 네이티브 프로젝트에 여러 가지 설정을 미리하고 생성하는 툴

• 최종적으로 완성된 프로젝트를 쉽게 배포 및 관리할 수 있게 다양한 기능 제공
• 아이폰/안드로이드 폰이 있으면 Xcode, 안드로이드 스튜디오 없이도 해당 플랫폼의 테스트를 진행하며 개발 가능, 사용이 비교적 단순함.
• 리액트 네이티브 웹 지원

• Expo에서 제공하는 API만 사용 가능, 별도로 필요한 기능을 네이티브 모듈로 추가로 만들어서 사용하는 것이 불가
• 리액트 네이티브 CLI를 이용했을 때 빌드 파일의 크기가 큼.

 

Expo 프로젝트 생성 및 실행

npm install --global expo-cli
expo init my-first-expo  // blank 첫번째 선택
cd my-first-expo
npm start

// 개발자 도구 페이지가 안 떠서 추가로 설정함.
npx expo install react-dom react-native-web @expo/metro-runtime

• 실제 안드로이드폰/아이폰에서 Expo를 실행할 수 있음.
• 에뮬레이터 실행은 cmd에 a 입력

 

2. 리액트 네이티브 CLI

• 필요한 기능이 있을 경우 모듈을 직접 만들어 사용할 수 있음.

• 배포가 불편하고, 사용이 복잡함.

 

리액트 네이티브 CLI 프로젝트 생성 및 실행

npx @react-native-community/cli init MyFirstCLI
// npx react-native init MyFirstCLI 대신 실행
cd MyFirstCLI
npx react-native start

• 프로젝트 이름은 영문과 숫자만 가능
• Metro : 리액트 네이티브를 위한 JS 번들러(bundler)로서 리액트 네이티브가 실행될 때마다 JS 파일들을 단일 파일로 컴파일 하는 역할

 

메인 파일 변경

// src/Home.js
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>My First React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  title: {
    fontSize: 30,
  },
});

export default App;

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

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

결과

 

 

 

본문에서 설명하는 내용과 사용한 이미지는 책 '처음 배우는 리액트 네이티브'를 참고하였습니다.