React Native 001

리액트 네이티브?

Link : https://reactnative.dev/ 

React Native · Learn once, write anywhere

모바일 디바이스 크로스 플랫폼 개발

React를 사용해서, 안드로이드와 IOS네이티브앱을 만든다

자바스크립트로 작성한걸, 네이티브 코드로 그린다.

목표 플랫폼의 네이티브UI구성요소를 활용해 그려준다.

빠른 갱신, 소스코드 저장하면 곧바로 결과 확인

페이스북 지원, 커뮤니티 주도

 

장점

- 웹뷰를 사용하는 다른 크로스 플랫폼과 다르게 실제 호스트 플랫폼의 표준 렌더링 api를 사용해서 랜더링하게 된다.

- 리액트를 기반으로 하기 때문에 생명주기, props, state를 사용하고 react-dom을 이용해 렌더링한다.

- 크로스 플랫폼이기 때문에 비슷한 코드로 ios와 android를 개발할 수 있다.

 

Native Components, Core components

react native는 react와 앱 플랫폼의 기본 기능을 사용해 android 및 ios 애플리케이션을 빌드하는 오픈소스 프레임워크

native components 

Android 개발에서는 kotlin 또는 java로 view를 작성하고 ios개발에서는 swift 또는 obc를 사용한다. react native를 사용하면 react component를 사용해 js로 이러한 view를 호출할 수 있다. 

웹개발을 할 때는 div태그나 p태그 등등을 사용하고 Androind ios 다 다른태그들이 있는데 react native는 View, Text, Image 등을 통해서 개발하고 런타임(프로그램이 실행되고 있는 시간)으로 각각 os에 맞게 바꿔준다. 런타임시 react native는 해당 구성 요소에 해당하는 android및 ios view를 생헝하고 react native 구성요소는 androud 및 ios와 동일한 보기에서 지원되기 때문에 react native앱은 다른앱과 같은 모양 느낌, 성능을 제공한다.

core components

리액트에서 기본적으로 제공하는 native components

<View> , <Text> , <Image> , <ScrollView> 등등

 

개발환경

EXPO

무료로 사용하는 서드파티, 쉬운 배포, 버전 업데이트, 휴대폰으로 테스트 가능 

Expo에서 제공하는 기능만 사용가능 따로 모듈 만들어 사용 불가 native 파일 제어 불가 복잡하고 섬세한 작업 제어 불가

React Native CLI

React Team에서 만들었다  네이티브 파일 및 모듈 사용 가능, 네이ㅣ브 소스 코드 작성 가능

Expo에 비해 편의성 부족, 사용자가 직접 기본 구성을 해야 함, Android stidio/X-code 다 설치해 빌드 배포해야 함

 

 

앱 생성, 시작

npx create-expo-app 프로젝트 이름

cd 프로젝트 이름
npm start # npx expo start 를 사용할 수도 있다

npm start로 시작을 하면 이런 화면이 나온다

아니 위처럼 나와야 한다. 

그런데 아래처럼 나오는 상황이 발생 

ConfigError: The expected package.json path: C:\경로\package.json does not exist

ConfigError: The expected package.json path: C:\경로\package.json does not exist

나는 바보다 만들어놓은 프로젝트로 directory를 바꾸지 않고 열라고 하니 있을리가 있다. 
cd 경로 를 해서 들어가 준 뒤에 실행하니 잘 되었다.

 

이후에 a를 눌러 안드로이드로 테스트 해 보려는데 또 오류가 발생

CommandError: No Android connected device found, and no emulators could be started automatically. Please connect a device or create an emulator (https://docs.expo.dev/workflow/android-studio-emulator). Then follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.

CommandError: No Android connected device found, and no emulators could be started automatically.
Please connect a device or create an emulator (https://docs.expo.dev/workflow/android-studio-emulator).
Then follow the instructions here to enable USB debugging:
https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.

이런 오류가 생기면 Device Manager에서 화살표를 눌러 시작한 뒤 다시 테스트 하면 된다(키는데 엄청 오래걸렸다)

그리고 다시 a를 눌러서 시작을 하면 잘 뜬다

App.js에서 수정 하고 반영하면 저장이 된다.

iphone의 경우 맥을 사용해서 개발하는 경우는 큰 상관이 없지만 윈도우를 사용한다면 가상머신을 사용해서 xcode를 받아 테스트 하면된다고 한다. 나는 맥os컴퓨터가 있지만 아이맥인 관계로 미국에 들고 오지를 못해서 iphone14pro max로 테스트를 할 예정.