React native 강의 정리 (1)

강의 출처

 

 

 

React native

• nodeJS 10버전 이상
• npm 6버전 이상
• expo

 

 

 

Expo

• create-react-app 처럼 리액트 네이티브 프로젝트를 자동으로 설정하여 생성해준다.
• 시뮬레이터 없이 실제 핸드폰에서 앱을 돌릴 수 있도록 한다.

 

 

 

Expo 의 장점

• React native file 을 숨겨줘서 신경쓰지 않아도 되도록 도와준다.
• React native file 이 지원하지 않는 다른 추가 기능도 들어가있다.
• React native file 을 직접 제어하고 싶다면 React native cli 를 사용하면 된다.
• Build process 를 제어해준다. (Window 에서 IOS 앱을 생성할 수 있다.)
• live reloading : 저장한 내용을 Simulator 에서 바로 반영해준다.
• hot reloading

 

 

 

Expo 빈프로젝트 생성 및 Expo 실행

$ cd projects
$ expo init my-app
> blank = 빈 프로젝트
> name = my-app

$ cd my-app
$ npm start
$ expo login

https://localhost:19002

expo login 을 하면 브라우저에서 Simulator 관련된 환경을 다룰 수 있다.

expo 를 실행한 노트북과 expo 를 실행한 핸드폰은 같은 wifi 아래에 있어야한다.

expo 브라우저에서 Run android simulator 을 누르면 시뮬레이터를 구동시킬 수 있다.

(또는 터미널에서 npm run android)

 

단축키

cmd + ctrl + r : 수동 리로딩

cmd + ctrl + d : Expo 개발자 메뉴

 

 

 

모바일 앱을 만드는 방법

1. 완전 Native 로 만들기
   • Android studio IDE 에서 Java 또는 Kotlin 으로 안드로이드 앱 만들기
   • Xcode IDE 에서 Swift 또는 Objective-C 로 iOS 앱을 만들기
2. 앱 기반의 Web view 로 만들기
3. React native (하이브리드 웹뷰 방식)
   • 안드로이드랑 IOS 가 둘다 자바스크립트 엔진을 가지고 있다.
   • React native 의 역할은 Android, iOS 의 Native 엔진에 React 컴포넌트를 통해 자바스크립트 메세지를 보내는역할이다.
   • 리액트 컴포넌트 -> Text, View 와 같이 React native 에서 만들어진 컴포넌트 -> Native app
   • 이 때 Text, View 와 같이 React native 컴포넌트는 브릿지 역할을 한다.
   • 브릿지를 통하기 때문에 이 부분에서 Traffic 이 생길 여지가 있다. 그래서 컨텐츠용 서비스 개발에는 적합하지만 게임 개발과 같이 3D 렌더링이 요구되는 경우 개발하는데 비추천 한다.

 

 

 

React native Hello world

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello world</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

• React native 는 모든게 View 이고 render 에서 return 할 때는 모든 것을 View 안에 넣어야한다.
• React native 의 View 는 웹페이지를 개발할 때 React 의 div 와 같은 레벨이다.
• React native 의 Text 는 웹페이지를 개발할 때 React 의 span 과 같은 레벨이다.
• React native 에서는 div, span 을 사용하지 않는다.
• React native 는 자체적으로 CSS 엔진을 구현했다. 그렇기 때문에 CSS의 컨셉을 유지한채로 Object 구조로 CSS를 표현할 수 있다. StyleSheet 가 그것을 위한 API 이다.
• React native 에서는 CSS 는 독립적으로 동작한다. 부모 컴포넌트(태그)의 CSS 가 자식에게 상속되지 않는다.