[처음 배우는 리액트 네이티브] 2장. 리액트 네이티브 시작하기. (개발 환경 세팅, 프로젝트 만들기)

https://reactnative.dev/

 

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

- 맥, 윈도우, 리눅스 환경에서 개발 가능

 

2.1 개발 환경 준비하기

- 공통 : Node.js, JDK, 안드로이드 스튜디오

- Mac : 왓치맨, Xcode 

- Window : Python

- 그밖에 OS와 설치 경로에 맞게 환경 변수 설정

 

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

- Expo : 리액트 네이티브의 사용을 편리하게 해주는 툴

• https://expo.io
• 아이폰과 안드로이드 폰이 있으면 Xcode, 안드로이드 스튜디오 없이도 해당 플랫폼 테스트 가능
• expo에서 제공하는 API만 사용 가능
• expo-cli 설치 : npm install --global expo-cli
• 프로젝트 생성 : expo init my-first-expo / choose a remplate에서는 blank를 선택
• 프로젝트 실행 : cd my-first-expo (해당 경로로 가서) / npm start (실행)

npm start 명령 실행 화면(좌) / expo 개발자 도구 화면(우)

 

QRcode 스캔으로 실행시킨 ios화면(좌) / 안드로이드 스튜디오 가상 머신에서 실행시킨 android화면(우)

 

- 리액트 네이티브 CLI

• 필요한 기능이 있을 때 모듈을 직접 만들어 사용
• Expo에 비해 배포가 불편, 처음 학습할 때 Expo 보다 어렵게 느껴질 수 있음
• 프로젝트 생성 : npx react-native init MyFirstCLI
  - 생성 시 프로젝트 이름으로 영문과 숫자만 사용 가능
  - 원하는 react 버전을 사용해서 프로젝트 생성 가능 : npx react-native init 프로젝트이름 --version x.xx.x
• 프로젝트 실행 : cd MyFirstCLI (해당 경로로 가서) / npm run ios 또는 npm run android
  - npx react-native run-ios 또는 npx react-native run-android 명령어로도 실행 가능
• Metro : 리액트 네이티브를 위한 자바스크립트 번들러(실행 시 터미널 또는 명령 프롬프트가 열림

Metro 실행 화면(좌) / 안드로이드 스튜디오를 통한 앱 실행화면(우)