[ReactNative] 왕초보를 위한 React Native 101 (1)

노마트코더에서 "왕초보를 위한 React Native 101"를 수강하며 공부한 부분들을 정리해보려고 한다.

 

원래 ReactNative로 개발을 하기 위해서는 Android Studio, Java, XCode 등을 모두 설치해야 한다. 하지만 현대의 기술 덕분에 그러한 수고를 덜 수 있다. 다만 테스트를 위해서 활용되므로 진짜 개발을 할 계획이라면 전부 설치하는 게 좋다고... 

CMD에 ```node -v```를 쳐서 버전이 14이상이면 그대로 진행해도 된다. 나는 v16.14.0으로 그대로 진행할 것이다.

앱은 아래와 같은 구조로 작동된다.

하지만 이중에서도 JavaScript와 Markup/Styling 만을 우리가 개발하면 나머지는 틀은 제공해주는 앱이 있다. 즉, React Native 코드를 작성하여 폰으로 전송하면 Expo 앱은 폰 안에 있는 React Native 코드를 실행시켜서 미리보기를 제공한다. 

구글 플레이 스토어에서는 "Expo"라는 이름, 애플 스토어에서는 "Expo Go"라는 이름으로 찾을 수 있다.

우선 (윈도우 컴퓨터) CMD에 ```npm install --global expo-cli```를 입력한다.

아주 현란하네,,,

React 코드는 ReactJS로 변환되고 Browser를 통해 보여진다.

그러나 React Native는 인터페이스로서 우리와 운영 체제 사이에서 번역을 해준다. 즉, iOS와 Android에게 예를 들어 버튼을 만들어 주세요 하는 메세지를 보내는 방식으로 앱이 작동된다. 

 

- 작동 방식

사용자가 버튼을 누르면 iOS와 Android가 이벤트를 감지하고 데이터가 된다. 이를 알려주면 JavaScript에서 배경을 빨랑으로 바꾸는 것과 같은 이벤트를 위해 코드가 실행되고 React Native는 Native 운영체제에 배경색을 변경해주라고 메시지를 보내어 UI를 업데이트 한다. 

 

# 코딩 시작

```expo init NyeongWeather``` 입력.

첫 번째 옵션(blank) 선택. -> 설치 진행됨.

```cd NyeongWeather```을 입력하여 디렉토리 이동하고, ```code .```을 입력하여 VisualStudioCode에서 프로젝트를 염. 

폰에는 Expo를 이미 설치했으므로 터미널에 ```npm start```를 입력하면 바로 웹사이트와 콘솔에 큐얼코드를 보여줌.

우선 Ctrl+C를 해서 나간다.

로그인을 위해서 ```expo login```을 입력한 후 사용자 이름/이메일 주소와 비밀번호를 입력한다.

로그인이 되었다면 ```npm start```를 입력.

 

다운받은 Expo 앱에서 큐얼을 스캔하였는데 계속해서 오류 발생.

CONNECTION을 기본설정인 LAN에서 Tunnel로 변경한 뒤에 다시 스캔해보았다.

 

App.js의 코드대로 구현된 것을 확인할 수 있다.

저장한 뒤 기다리면 폰에서도 확인가능하다.

(나는 엄청 오래걸리고 잘 안되어서 종료 후에 다시 실행도 해보고 Tunnel로도 다시 바꾸고 하니깐 되기는 했다!)

 

추가로 snack.expo.dev을 통해 웹 상에서 코딩을 하고 Expo로 바로 확인할 수도 있다.