React Native - 1 [설치]

React Native

- 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다.[3] 안드로이드[4], iOS, 웹[5], UWP[6]용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다

 

즉, react로 모바일 앱을 만들때 사용한다. react로 모바일 앱을 만들게 해주는 프레임 워크라고 할수 있다.

 

개발환경은

 

- 모바일 기기에 expo client 설치

- node 설치

- npm 설치

- expo-cli 패키지 설치 (react native의 react-create-app같은 명령어 이다.)

macbook@Macbookui-MacBookPro ~ % npm install -g expo-cli

휴대폰에 expo client라는 것을 깔아서 가입을 해야한다.

- 안드로이드나, ios도 마찬가지이다. 

apps.apple.com/kr/app/expo-client/id982107779

‎Expo Client

expo.io/settings/services

Expo — Log in

모바일 앱을 만들면서 시뮬레이션을 할때에  expo를 사용하여 당신의 로컬 휴대폰 기기에서 한다고 생각하면된다.

 

그렇게 하지 않고 컴퓨터 안에서 시뮬레이션을 할수도 있지만 훨씬 복잡하다고 한다. 

(react native cli)

 

먼저 프로젝트를 만들어보자

expo init NativeProject

3가지 를 물어보는데

blank를 선택하자 : 백지에서 시작할 것이므로

 

다음과 같이 앱이 생성되고 git repo를 하나 생성해서 올려두자

 

그리고 VS를 이용해서 앱을 살펴보자

app의 구성설정 부분이다. 간단하게 생각해서 넘어가고

바로 앱을 실행시켜보자

 

yarn start!

뭔지 모를 화면이 나왔다. 아래 보면 qr코드 하나가 보이는데, 안드로이드에서 expo앱을 열고 거기서 scan qr code부분을 누르면

위 코드로 개발중인 ReactNative 앱들을 시뮬레이션 할 수 있다. 

 

터미널에서 yarn ios(android) 혹은 npm ios(android)를 한다면 해당 시뮬레이션이 돌아간다. 

 

ios는 따로 터미널에서 expo에 로그인을 해줘야한다.

뭔진 모르겠지만 이런에러가 떳다, 어차피 난 직접 내 휴대폰의 화면을 보면서 할것이므로 상관없다.

휴대폰의 expo로 들어가면 현재 실행중인 프로젝트가 뜬다. 해당 프로젝트를 실행해서 들어가면

이렇게 멋진 화면이 뜨고 휴대폰에서는

이렇게 보고 싶은 화면이 나오게된다. 

- 단 모든기기들이 같은 와이파이에 연결되어 있어야 한다!
- 굳이 그럴필요는 없지만 자잘한 에러들이 일어나지 않는다고 한다.

 

app.js 를 보면 

Text 컴포넌트를 수정하고 바로 저장하면 휴대폰에 바로 refresh가 된다.

이렇게 자동으로 refresh 되는 과정을 live reload라고 한다.

 

앱에서 휴대폰을 흔들면 

이렇게 개발자 모드가 켜지게 되는데 여기서 

Debug Remote JS를 키면 맥에서는 이렇게

휴대폰 앱에서는 이렇게 표시가 뜨게된다.

이모드는 네트워크 설정이나 다른 자세한 디버깅을 할때 사용하고

보통은 이 기능을 사용한 상태로 앱개발을 하면 로딩시간이 길어져서 사용하지 않는다.

 

즉, 이런 경우들을 보면 React Native앱은 react기반 웹사이트를 앱안에 집어 넣는 방식이다.

이렇게 하기위해서는 React 컴포넌트 들과 안드로이드를 연결할 무언가가 필요한데

이러한 것들이 바로 브릿지 이다.

 

브릿지

- react 컴포넌트 들과 안드로이드 앱을 연결시켜주는 장치이다.

- 간단한 데이터 교환 앱들은 JS코드가 android혹은 ios로 변환되어 들어가도 괜찮은데

3D 비디오 게임같은 엄청나게 많은 데이터처리가 요구될 경우에는 브릿지에 과부하가 생겨 성능이 매우 안좋게된다.

react-native 패키지안에 들어있는  것들이 브릿지라고 생각하면된다.

- 굉장히 react 컴포넌트 같다.