[React-Native] React-Native (1)

React Js지식을 97%가량 사용하여 IOS, Android 모바일 개발을 동시에 할 수 있도록 도와주는 프레임워크

• Live Reload를 지원한다.
• Create-react-native-app / Expo를 사용하여 쉬운 개발 시작이 가능하다.
• React Native 앱은 JavaScript로만 이루어지지 않는다. -> 위와 같은 구조로 이루어져 있다.
• React Native 앱에서 가장 중요한 부분은 Bridge들을 통해서 코드가 운영체제와 통신할 수 있도록 도와주는 인프라 시설이다. (React Native Js Modules, ...)
• Java와 Xcode로 우리가 개발한 App을 가져와서 .apk와 .ipa로 만들어주고 App Store에 등록한다.

* ReactJs (웹사이트): HTML 작성 -> ReactJs -> Browser가 JavaScript 실행

 

• React Native는 모바일 웹 사이트(앱 안에 있는 브라우저)가 아니다.
• React Native는 번역기이다. -> 인터페이스로써 App과 운영체제(IOS, Android, ... 사이에 존재한다.)
• 우리가 작성한 코드를 IOS 또는 Java Android 코드로 번역한다.
• React Native -> IOS/Android/... 과정은 자체적으로 알아서 동작한다.
  
  

* 동작 과정

1. Native(IOS, Android, ...)는 Event를 대기하고 있는다.
2. Event가 발생하면 Event에 대한 데이터를 수집한다. (화면 어디서 Event가 발생했는지, 어디서 눌렸는지, 얼마나 눌렸는지...)
3. React Native는 해당 데이터를 바탕으로 JSON 메시지를 생성한다.
4. JavaScript는 해당 JSON 메시지를 수신한다.
5. 코드가 실행되고 React Native는 결과를 운영체제(IOS, Android, ...)에 보낸다.

---

Expo

• JavaScript, Markup/Styling 부분만 존재하지 않고 그 외의 모든 인프라가 준비되어 있는 프로그램 -> Compile 과정이 필요 없다.
• 이미 Compile 된 앱을 사용한다. -> 작성한 react Native 코드들 해당 앱으로 전송시켜준다.-> 앱으로 작성한 코드의 결과를 바로 확인할 수 있다.
• App Store에 등록하지 않고 개인 핸드폰에서 바로 테스트할 수 있다.
• 작성한 코드를 시뮬레이터나 Java, Xcode 등 설치하지 않고 바로 실행시킬 수 있다.

설치 방법

// 모든 폴더에서 expo-cli에 접속 가능하도록 설치한다.
npm install --global expo-cli

* Mac OS를 사용하면 Watchman을 추가로 설치해야 한다.

brew update
brew install watchman

Android -> Play Store에서 Expo를 설치한다.

IOS -> App Store에서 Expo Go를 설치한다.

 

프로젝트 생성

expo init {폴더명} // 폴더 생성 후 기본 설정 설치 진행
cd {폴더명}

* 이후 첫 번째 (blank) 선택

 

모바일 실행 커맨드

  // package.json
  // Java, XCode 시뮬레이터가 없으면, android, ios 실행 안됨.
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  }

expo login // expo login
npm run start

* Teminal에서 위 명령어 입력 후 모바일 Expo/Expo Go 실행

---

Snack

• https://snack.expo.dev/
• 브라우저에서 React 애플리케이션을 만들 수 있게 도와주는 Online code Editor이다.
• Visual Studio Code 또는 nodeJs를 다운받을 수 없는 환경에서 유용하다.
• 페이지 우측에서 My Device를 클릭하면 나타나는 QR 코드를 통해 모바일 Expo/Expo Go에서 실행할 수 있다.
• 페이지 내에서 Expo 로그인을 진행하면, QR 코드 없이 바로 모바일에서 실행 결과를 확인할 수 있다.

* REF

https://nomadcoders.co/react-native-for-beginners