React Native - (1) 작동원리, Expo 활용 개발, 설치 (Mac 기준)

React Native 작동 원리

React Native 앱

= 그림의 모든 structure + JS 코드(Javascript, Markup/Styling)

= Bridge를 통해서 JS 코드가 운영체제와 통신을 할 수 있도록 하는 infra structure

React Native = 인터페이스

: JS 코드(Javascript, Markup/Styling)와 운영체제(iOS, 안드로이드) 사이에 있는 인터페이스

React Native는 bridge를 통해 JS 코드를 운영체제에 전달해준다. 이런 면에서 React Native는 shell과 유사하다.

 

상세 작동방식

1. Event

2. Collect data and notify

iOS, Andriod가 발생하는 이벤트들 수집 (ex. 화면 클릭)

 

3. Serialized payload

event가 발생하면, bridge를 통해 JS에 메시지를 전달. json 형태로.

 

4, 5. 

우리가 코드를 작성하는 부분

bridge를 통해 event를 전달받으면, method가 호출되거나 update UI 등의 동작이 일어남.

 

6. 다시 bridge를 통해

 

7,8. Native에 전달하여 update UI

 

 

---> JS는 운영체제를 상대로 메세지를 주고받기 위한 레이어

 

 

모든 structure가 포함된 앱을 build, compile하기 위해서 Java, Xcode가 있어야 한다.

Java, Xcode로 전체 structure를 가져와서 이것들을 apk/ipa에 넣어준다. (안드로이드: apk, IOS: ipa)

누군가 앱을 다운 받으면 이 모든 것들을 다운받게 되는 것이다.

 

따라서 React Native 앱을 개발하기 위해서 Java, Xcode, 시뮬레이터 등이 필요하지만, Expo를 활용하면 JS 코드 부분만 작성하여 앱을 실행할 수 있다. 이 글에서는 그 과정을 다룰 것이다. 

 

Expo

시뮬레이터, Java, Xcode 등 없이 React Native 개발이 가능하다.

 

Why is it possible?

Store에 올라와 있는 앱들에는 그림 상의 모든 것이 존재하지만, 보라색으로 하이라이트된 저 부분(JS, Markup/Styling)만 없다. (=우리가 코딩해야 할 부분)

 

Expo에 JS 코드 외의 infra structure가 존재하고, JS 코드만 작성하는 것이므로 우리가 직접 컴파일해서 앱을 만드는 것이 아니다.

Expo는 React Native 코드를 곧바로 폰으로 전송시켜서 실행하기 때문에 컴파일 하지 않고도 폰에서 바로 React Native 코드를 '미리보기' 할 수 있다.

 

 

Expo 설치

https://docs.expo.dev/get-started/installation/

Installation - Expo Documentation

npm install --global expo-cli

만약 node 설치가 안되어 있다면 

brew install node를 통해 설치한다.

brew update
brew install watchman

폰에서 Expo Go 설치

설치 후 expo 회원가입을 해준다.

Create a new app

https://docs.expo.dev/get-started/create-a-new-app/

Create a new app - Expo Documentation

npx create-expo-app my-app && cd my-app

 

Login 을 진행해준다.

expo login

이때 node version이 너무 최신일 경우 Warning이 뜨므로 안정한 version(LTS)으로 version을 조정해준다.

 

app create 후 vscode terminal에서 

npm start

를 실행하면 QR 코드가 뜬다. (신기하다!)

해당 QR코드를 폰으로 비춰보면 Expo Go 앱이 실행되면서 앱 화면이 뜬다.

정확히 App.js에 있는 텍스트가 뜬다.

심지어 vscode에서 수정사항을 저장하면 바로바로 반영된다.

 

다음 포스팅에서는 Weather App 코드를 작성해보면서 RN 문법을 익혀봐야겠다. 

 

 

해당 글은 Nomad Coder의 강의를 들으며 공부한 것을 토대로 작성되었습니다.