[React Native] 개념 및 작동원리, 환경세팅

 

✔️ Application Structure

 

우리가 직접 코드를 짜는 곳은 JavaScript 와 Markup/Styling 이다.

하지만 어플리케이션은 그 이외에 구조들이 필요하다.

Android 같은 경우에는 나머지 부분이 Java 로 되어있고, IOS 같은 경우는 swift 로 되어있다.

그렇기 때문에 우리가 앱을 만들 때에는 Java, X-code 등 환경세팅이 복잡하게 필요한 것이다.

✔️ React Native 작동 원리

기존에 ReactJS 같은 경우는 코드를 그대로 브라우저에서 실행하는 원리이지만,

React Native 는 코드를 그대로 실행하는 브라우저가 있는 것이 아닌, ios 와 android 로 각 각 번역해주는 번역기 라고 생각을 해주면 된다.

각 각의 ios 와 android 에 bridge 가 있어서 메세지를 전달을 한다. 그리고 이 부분은 자동으로 진행된다.

 

1. ios 와 android 에서 터치를 감지한다. ( Event )

2. ios 와 android 에서 터치 감지 데이터를 수집한다. ( 화면 어디에서 클릭되었나? 얼마나 오래 클릭되어있었나? )

3. React Native 는 그 정보를 가지고 json 메세지를 생성한다.

4. javascript 는 그 메세지를 받는다.

5. React Native 는 Native 운영체제에 메세지를 보낸다.

---

✔️ EXPO Settings

Expo CLI 설치
npm install --global expo-cli

 

Expo 는 우리가 코드만 전달을 하면 나머지 환경세팅을 해주기 때문에 실제로 우리가 어플을 직접 보면서 확인할 수 있게 도와준다.

App Store 에서는 Expo Go 설치

https://docs.expo.dev/

Expo Documentation

 

• npx create-expo-app --template
• y
• 첫 번째 blank template 선택
•  [ 프로젝트 이름 ] 프로젝트 명 입력

 

cd [ 프로젝트 이름 ]  폴더로 들어가서

code . 명령어를 실행하면 vscode 가 실행된다.

필자는 시뮬레이터를 아직 설치하지 않았고, 핸드폰에 expo go 어플을 깔아서 확인해볼 것이기 때문에

package.json 에 들어가서 확인해보듯 다른 명령어로는 안되고 npx expo start 로만 가능하다.

 

npx expo login 으로 로그인을 해주고 다시 실행한 후에 핸드폰 어플을 확인해보면 정상적으로 [프로젝트 이름] 을 확인할 수 있다.

 

하지만 같은 와이파이인 환경에서면 가능한데, 지금 내 환경은 컴퓨터는 LAN, 모바일은 wifi 이다.

그래서 npx expo start --tunnel 터널 모드로 실행시켰다. 

 

모바일에서 바로 확인 가능하다. 신기함