React Native App 생성하기

Expo CLI (추천!)

• third-party service(FREE)
• 프로젝트 생성이 수월하고 쉽다
• 카메라 등의 네이티브 기능 사용이 쉽다
• expo CLI 사용 중 React Native Cli 방식으로 전환이 언제든지 가능하다

🔎
expo cli 프로젝트 생성
npm i -g expo-cli
npx create-expo-app -t expo-template-blank-typescript // ts 사용 시

React Native CLI

• RN 개발팀과 관련 커뮤니티에서 제공한 기초적 개발 설정 방식
• 편리한 기능이 적고 카메라 등의 네이티브 기능 사용 시 expo 보다 어려움
• 네이티브 소스 코드와 통합하기가 비교적 쉬움 (java, objective-C, swift, kotlin …)

Expo 프로젝트 구조
└ .expo-shared
└ assets
└ node_modules
└ .gitignore
└ app.js // root 컴포넌트
└ app.json // 앱의 설정, 실행 방식을 구성
└ babel.config.js
└ package.json
└ package-lock.json

---

실행하기

터미널에서 npm start 명령어로 프로젝트 실행

모바일 기기로 실행

1. 모바일 기기에 Expo Go 앱 설치 후 실행
2. expo 앱에서 실행 된 프로젝트 로드
   • android: expo 앱에서 QR코드 스캔
   • ios: 카메라 앱으로 QR코드 스캔

시뮬레이터로 실행

• android 시뮬레이터로 실행
  1. Android Studio 설치
  2. 앱 구동을 원하는 기종으로 시뮬레이터 실행 (play store 아이콘이 있는 기종 선택)
  3. 터미널에서 a 명령어 입력 (open android)

• ios 시뮬레이터로 실행
  1. Xcode 설치
  2. 시뮬레이터 실행
  3. 터미널에서 i 명령어 입력 (open ios)

🔎 기타 터미널 명령어
r : reload app. 앱을 재실행 (새로고침)
m : toggle menu. 개발자 메뉴 창 토글
d : show developer tools.
c : show project QR. QR코드 조
? : show all commands. 이용가능한 단축키 목록 조회

🔎 React와 유사점 / 차이점

• 유사점
  • React에서 제공하는 hooks 사용 가능 (useState, useEffect…)
  • 컴포넌트 개념 동일
• 차이점
  • html태그 대신 ReactNative에서 제공하는 컴포넌트를 사용
  • 운영체제 별 전용 속성이 존재
  • CSS를 제공하지 않는 대신 StyleSheet 객체를 사용.
  • CSS의 영향을 받아 속성이 거의 유사함
  • 간혹 ios와 android의 스타일 적용 방식이 다를 수 있음.

---