[RN]리액트 네이티브 시작하기

 

리액트와 리액트 네이티브에 대해서 짚고 넘어가자

 

- React는 웹 어플리케이션 개발을 위한 자바스크립트 라이브러리이고,

React Native는 하이브리드 앱이며 iOS 및 안드로이드 앱 개발을 위한 프레임워크.

 

React는 웹 브라우저 상에서 동작하며, React Native는 네이티브 모바일 앱에서 실행된다.

 

두 기술은 공통적으로 React의 구성 요소 기반 접근 방식을 사용하며,

 

React Native는모바일 앱에서 사용되는 네이티브 UI 컴포넌트를 지원함.

React Native는 JSX와 JavaScript로 작성된 React 컴포넌트를 사용하여 앱을 빌드함.

 

React와 React Native는 코드 공유를 최대화하기 위해 비슷한 API를 공유하고 있당.

 

---

리액트 네이티브 AKA RN은 JS로 코드를 짜면 된다. 그렇다고 Javascript로만 이루어진 건 아니다.

JS는 우리가 RN의 운영체제와 소통할 수 있는 소통일 뿐..

( 리액트 네이티브를 사용하면 자바스크립트를 통해 애플리케이션을 개발하고, 

이를 운영체제에 맞게 변환하여 실행함.)

 

리액트 네이티브 애플리케이션을 빌드할 때, 

자바스크립트 코드로 작성한 프로젝트 파일을 컴파일하고, 

해당 운영체제에 맞는 네이티브 코드로 변환함.

 

( 안드로이드 운영체제를 위한 APK 파일은 자바(Java)로,

 iOS 운영체제를 위한 IPA 파일은 스위프트(Swift) 또는 Objective-C 등으로 변환됨. )

 

리액트 네이티브 애플리케이션을 빌드할 때 필요한 인프라도 사용됨. 이

것에는 리액트 네이티브의 종속성(dependencies)으로 포함된 여러 라이브러리나 도구들이 포함된다.

이러한 인프라 요소들은 자바스크립트와 함께 사용되며, 빌드 프로세스에서 자동으로 처리되니까 걱정마시라.

---

EXPO라는 어플리케이션을 받으면!! 

Java, Xcode를 설치하지 않아도 작성한 코드의 결과를 앱에서 즉시 확인할 수 있다. 

 

Expo CLI 설치하려면 아래의 코드를 터미널에 입력하자 (윈도우, 안드로이드 기준 설명)

npm install --global expo-cli

 

그리고 google playstore에서 아래의 앱 다운받기 (내 폰으로 바로 테스트가능)

https://play.google.com/store/search?q=expo&c=apps 

expo - Android 앱 Google Play

 

 

먼저!

 

node 버전을 확인해보자.

 

v.14.17.3 보다 높아야 진행을 할 수 있다.

호호

그리고 npm도 설치되어 있어야함.

 

뭐..리액트를 꾸준히 해왔으면 다 있는거니까 쫄지말자

 

다시 터미널여시고

npx create-expo-app 앱이름

expo init 만들고싶은 어플리케이션이름/프로젝트이름

 

나는 모르고 expo init까지만 친 후, 모르고 enter를 눌러서

app이름을 그 다음줄에 쳤다 

 

cd 프로젝트이름

code .

 

하면 VScode로 해당 프로젝트가 실행됨

 

이제 로그인을 해주자

npx expo login

 

실시간 미리보기를 하려면

 

VSCODE 터미널창에

npx expo start --tunnel

그럼 QR코드가 뜨는데 이걸 스캔하면 폰으로 실시간 업데이트를 볼 수 있다

 

이때 연결이 안된다면!!

 

PC가 WIFI를 사용할 경우 휴대폰도 같은 WIFI를 사용하거나

 

인터넷선으로 연결되어있으면 데이터를 켜서 사용해야한다.

(나의 경우는.. 휴대폰은 와이파이를 사용하고 인터넷은 선으로 연결되어있음에도 잘 작동이 되었다)

 

---

혹시 휴대폰이 없으면

https://snack.expo.dev/? 

Snack - React Native in the browser

요기서 시뮬레이터를 이용하면된다

 

출처 : 노마드코더 React Native