[React Native] React Native App의 구성요소와 파워풀한 툴 : Expo

React Native의 앱은 JavaScript로만 구성되어 있지 않다.

앱에서 JavaScript 가 차지하는 비중은 가장 낮다.

Bridge 들을 통해서 우리 코드가 운영체제와 소통할 수 있게 해주는 인프라 시설이 제일 중요하다.

1. React Native
   1-1 : JavaScript Interpreter
   1-1-1 : React Native JS Modules
   1-1-1-1 : JavaScript
   1-1-1-2 : Markup/Styling

2. React Native native modules

3. Plaform APIs

이렇게 1 과 2 / 2와 3 이 연결되어 있다.

React Native 의 앱을 다운받을 때 JS 만 받는 것이 아니라 이 모든 기본 시설을 포함해서 전부 다를 다운 받는 것이다.
그 기본 시설은 JavaScript 가 운영체제와 이야기 할 수 있도록 해준다.
이 점을 분명하게 하고 가야한다.

React Native application은 shell 과 같다.

우리는 JavaScript 코드를 넣고 그 JavScript 코드는 운영체제와 이야기 할 수 있는 것이다.

그래서 compile 이 필요하고 실제로 각 운영체제에 맞는 앱을 만드는 것이기에

Xcode 가 필요하고 Java 가 필요해지는 것이다.

코드가 준비가 다 되었다면

Xcode와 Java 가 이 인프라를 가지고 와서

Android 의 경우 .apk
iOS 의 경우 .ipa

안에 넣어주는 것이다.

그리고 나서 app store 로 가는 것이다.

그치만 똑똑한 누군가가 JavaSCript 와 Markup/Styling 부분에만 구멍을 뚫어준 어플리케이션을 앱 스토어에 올려주었다.

JavaScript 와 Markup/Styling 부분을 제외한 나머지 부분은 다 준비가 되어 있는 것이다. 컴퓨터와 스마트폰의 앱을 연결해 그 앱에 코드를 전송함으로써 React Native 앱의 테스팅을 해 볼 수 있는 것이다.

다시 한번 강조하지만, React Native 앱은 모든 인프라 + JS 코드 임을 명심해야 한다.

그리고 이 모든 구조랑 Bridge는 JS가 운영체제와 소통할 수 있게끔 해줌을 기억하자.

그리고 Google play store & iOS App Store 에 이 모든 기반 시설이 준비된 앱이 있다. 단지 코드 부분만 없기 때문에 우리가 작성을 해주면 된다.

그래서 우리는 컴파일을 하지 않아도 되고 코드를 작성해 전송해 주기만 하면 된다. 폰에서 즉시 우리 코드를 테스트해 볼 수 있음을 의미한다.

그 앱의 이름은 Expo

작성한 코드의 결과물을 앱에서 바로 확인할 수 있다. 그 어떤 시뮬레이터, Java, Xcode 없이 말이다.

npm install --global expo-cli

추가적으로 Mac OS 유저라면 watchman 이라는 것을 다운받아 줘야 한다.

brew update
brew install wacthman

https://docs.expo.dev/

그리고 앱 스토어에서 Expo 를 검색해 다운받아 주자.

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