[왕초보 React Native] 1. Intro

• 환경
  • winodows 11

• 내용 출처
  • 왕초보를 위한 React Native 101
  • https://nomadcoders.co/react-native-for-beginners/lectures/3116

• node.js 설치
  • https://nodejs.org/en

설치 확인

• expo 설치
  • 본래 어플리케이션 개발을 위해서는 아래의 표와 같이 깔아야할께 무척 많다.
    • 시뮬레이터, Java, Xcode, ...
    • iOS; Objective-c, Swift
  • 초심자인 우리는 "expo" 를 써보자.
    • 작성한 코드에 대해 어플리케이션에서 어떻게 나타나는지 바로 확인할 수 있도록 해준다.
    • 핸드폰으로 또한 expo 어플을 깔아야한다.
  • mac 유저의 경우 watchman 추가 설치 ( brew install watchman )

npm install --global expo-cli

expo는 complie 과정을 건너띄고, 작성한 code를 바로 볼 수 있도록 해준다.

 

• React Native에는 브라우저라는것이 없다.
  • react native, "버튼 좀 만들어줘" -> bridge -> iOS / Android

 

• 통신 방법
  
  1. IOS / Android Listening Event
  2. Collect data and notify ( 사용자가 화면을 누르고 있는지 )
  3. Bridge Serialized payload
  4. JavaScript Process event ( 코드로 해당 이벤트를 읽어옴 )
  5. Call native methods or Update UI ( 코드를 실행 )
  6. Bridge Serialized batched response
  7. IOS / Android Process commands
  8. Update UI

JavaScript는 운영체제와 메시지를 주고 받기 위해 사용하는 레이어

 

• Creating APP
  • "SconeWeather" expo 프로젝트 생성
  • https://docs.expo.dev/tutorial/create-your-first-app/

npx create-expo-app SconeWeather

 

npm start

시뮬레이터가 설치되어 있지 않기 때문에 다음의 터미널에서 설명하는 명령어는 당장은 불가능하다.

expo가 돌아가는 것을 확인하였고, 이제 로그인을 진행하여준다. ( Ctrl+C로 npm은 일단 종료해둔다. )

 

• 로그인
  • 핸드폰 설치한 expo 어플 계정을 입력한다. ( 미리 회원 가입을 해뒀다. )

npx expo login

 

 

이후 npm start를 해주면 핸드폰 상에도 아래와 같이 뜨고,

project 폴더에서 App.js에 적힌 그대로 표시되는걸 확인할 수 있다.

SconeWeather Project가 보인다. 이를 클릭하면 된다.

어플리케이션 상의 화면

App.js

 

 

App.js를 수정하면 실시간으로 어플에도 반영된다.