React-Native (1)

Kng_db·2022년 12월 29일

React-Native란?

react는 웹 개발에 한정된 라이브러리가 아니다. react-dom을 쓰면 웹 앱개발에 쓰이고,
react-native( Bridge/JSI 등등 )를 사용하면 모바일 앱개발에 쓰인다.
( 리액트로 모바일앱을 만들 수 있는 프레임워크 )

React-Native를 사용하는 이유!

기존에는 ios 환경과 안드로이드 환경에 맞게 각각 개발했어야 했다. 하지만 native가 나오면서,
리액트로 android, ios 네이티브앱을 동시에 만들 수 있게 됐다.
( 동시에 만들 수 있는 크로스플랫폼! )

js기반의 react를 이용하는 것이기 때문에 배우기 쉽고 크로스플랫폼이기 때문에 비용절감에도 탁월하다.

구동원리!

3종류의 thread로 구성되어 있다.
~~( 각 thread의 역할 공부 후 추가, 수정 )~~

경쟁제품

Native 개발환경 만들기

`Expo` 플랫폼으로 개발환경 셋업하기

Expo를 사용하는 이유!

장점: 쉬운 셋업 및 빠른 초기개발
단점: Native 코드 수정은 불가능

즉 처음 접하기 좋고, 배우기 쉽기 때문!!

그렇다면 다른 플랫폼은 무엇이 있나?

React Native Cli
장점: Native 코드 직접 수정 가능
단점: 모든 React Native 를 위한 인프라를 직접 설치 ( 셋업 과정이 복잡해서 오류 많이남 )
CRNA (Create React Native App)
장점: CRA 에서 영감을 받고 만든 React Native Boiler Plate로 Expo SDK와 Cli의 특징을 모두 가지고 있음
단점: Android Studio 또는 Xcode 설치 필요
ignite
CRNA + MobX 등 각종 라이브러리들도 샘플 코드들이 들어 있음.
React Native로 복잡한 앱을 만들어야 할 때 초기 셋업 후 간단한 수정작업으로 앱 완성 가능. 숙련자에게 오히려 추천.

Expo를 사용해서 React-Native 개발환경을 셋업 해보자!!

Expo Go 설치 및 회원가입

ios는 앱스토어, 안드로이드는 플레이스토어에서 다운로드 한다.
https://expo.dev/ 에서 Expo 회원가입을 한다.

EAS Free Plan 설정하기!

회원가입을 하고 로그인을 했으면, ( 웹과 모바일 둘 다 로그인 )
웹사이트에서 Create project를 한다.

위에서부터 차례대로 터미널에 입력해 주면 된다.
( npm말고 yarn 방식도 있는데 큰 차이는 없지만 yarn이 최신식이라 웬만하면 yarn방식 추천! )
~~npm과 yarn은 마치 var와 let, const같은 느낌...?~~

npm install --global eas-cli	// Expo와 개발자(ide)를 이어주는 역할
								// 설치오류가 나면 뒤에 ` --force` 를 붙여주거나 yarn으로 시도!
npx create-expo-app rn-lecture-basic-kng	// native환경의 폴더 생성! (app 뒤로는 프로젝트명)
eas init --id ____	// 생성된 폴더 안으로 들어가서 입력! 로컬 저장소 생성! ( QR코드 뜨면 확인가능 )

이 과정에서 뜨는 QR코드는 로컬저장소임!!! yarn start로 보이는 화면!!
( eas update를 해줘야 배포하는 것! 이 과정에서 뜨는 QR코드가 Expo에 배포된 버전! )

그리고 휴대폰으로 QR코드를 찍어보면 Expo에 실시간으로 화면이 뜨는 것을 볼 수 있음!!

!!주의!! 작업 중 화면이 꺼지면( 홀드 ) 연동이 풀리는 경우가 있는데 다시 켜주면 됌!!