React Native 시작

React Native 시작하기

• EXPO CLI
  Xcode 또는 Android Studio 를 설치하지 않아도 프로젝트를 시작할 수 있다.
  웹 브라우저를 이용해서 실행시킨다.

• React Native CLI
  Xcode 또는 Android Studio 가 필요하다.(둘 중 하나만 있으면 된다)
  설치하는데 약 1시간이 필요하다

일단은 Xcode와 Android Studio가 없기 때문에 expo cli를 이용해보자

설치 순서

1. 노드 버전 10이상
   node js 공식홈페이지에서 다운로드
   node가 설치되었는지 확인하기 위해선
   윈도우 + R 키를 누르고 cmd창을 켜서

node --version
npm --version

으로 확인할 수 있다

2. expo cli 설치

npm install -g expo-cli

3. 프로젝트 만들기

expo enter code hereinit 프로젝트명
cd 프로젝트명
npm start (or expo start)

4. 프로젝트 실행하기
   iOS 또는 Android 에 Expo 어플을 설치하고 컴퓨터와 동일한 와이파이에 연결한다
   Android - Expo앱을 이용해 QR코드를 스캔한다
   iOS - 화면의 지시에 따라 링크를 얻는다.
5. 프로젝트 수정하기
   App.js를 수정하고 저장하면 Expo어플이 자동으로 리로드 된다.

expo 문서
https://docs.expo.io/versions/latest/

Expo 단점

expo를 사용하면 react native API 및 사용자 정의 네이티브 모듈을 포함할 수 없다.
조금 더 깊은 개발을 하기 위해선 Native CLI를 이용해야 할 것이다.

react native 테마(부트스트랩같은 느낌)

참고 사이트
나중에 개발 돌입할때 사용하면 좋을 것이다

https://github.com/callstack/react-native-paper

https://heropy.blog/2017/11/25/yarn/

Props

components를 사용할 때 매개 변수 props을 이용해서 정의한다.
예를 들어 Image Component는 source라는 prop으로 제어한다.
바나나 이미지 보여주기

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () =>
 Bananas);

여기서 보이는 태그 문법은 문자열도 HTML도 아니다. 이 문법을 JSX라고 부르며, 자바스크립트의 문법 확장이다.
JSX에서는 {pic}처럼 중괄호 안에 Javascript표현식을 넣을 수 있다.

텍스트 출력

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

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', top: 50}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

Greeting 클래스에 name prop를 넘겨줄 수 있다.