[React-Native] 시작하기

간단한 어플리케이션 개발을 의뢰받았다. Android와 iOS 둘다 가능한걸 요구하길래 크로스플랫폼을 쓰기로했다.

 

React Native

깊게 공부할 시간이 없다. 개념이해 없다. 그냥 일단 Hello world 찍는다.

---

Installing dependencies

그래도 Expo CLI보다는 React Native CLI로 가보자

 

[공통사항]

맥북샀으니까 Homebrew 써보자. 참고로 16인치다👍

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew install node
brew install watchman

 

[Android]

JDK 8 이상버전을 설치해아한다. OpenJDK를 많이 쓰는 것 같다.

# brew tap AdoptOpenJDK/openjdk
# brew cask install adoptopenjdk8

안드로이드 스튜디오 설치받고 커스텀 메뉴에서 다음의 항목을 설치한다.

* Android SDK
* Android SDK Platform
* Performance(Intel HAXM)
* AVD(Android Virtual Device)

설치가 끝나면 SDK Manager에서 다음의 항목을 '잘' 설치한다.

* Android SDK Platform 28
* Intel x86 Atom_64 System Image "or" Google APIs Intel x86 Atom System Image
* Android SDK Build-Tools 28.0.3

환경변수 셋팅을 해주자.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

 

[iOS]

드디어 xCode를 써볼일이 생겼다. 앱스토에서 설치해주자.

cocoapos를 설치해준다. 군 생활할때 신병보고 python 할줄 아냐고 물으니까 ruby는 할 줄 안다고 답했던게 기억난다.

sudo gem install cocoapods

---

Create a new app

프로젝트를 만들면 기본적으로 셋팅이 된다.

npx react-native init AwesomeProject

이제 실행을 할때, 콘솔에 찍힌거 처럼 run-ios 또는 run-android하면된다. 명령어를 실행하면 에뮬레이터를 환경변수대로 찾아서 실행하고 앱 설치하고 실행시켜준다.

 

초기에 App.js에 따른 앱 구동화면을 보면, r을 누르면 소스코드 변경된게 적용된다고 되어 있다. 하지만, 시도를 해보면 앱에서 서버를 찾을 수없다는 에러가 뜬다. 확인해보니 Metro bundler라는걸 따로 실행해줘야 이걸 통해서 적용하는 것같다.

npx react-native start

---

Hello, world!

그냥 App.js에 코딩하면 플랫폼에 맞춰 결과물이 나오는 것 같다.

 

Hello, world!

코드 자체는 Javascript인데 ES2015(ES6)을 따르므로 생소하게 느껴진다. import, from, class, extents가 그러한 예이다. 또한 retrun (...)에 있는 구문은 JSX이며 JavaScript XML의 약자이다. 이런 식으로 결국 JSX를 render해주는 component들을 정의해서 조합하면 UI가 완성될 것 같다.

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

export default class App extends Component {
  render() {
    return (
      <View><Text>Hello, world!</Text></View>
    );
  }
}

Component의 Instance가 생성되었을 때, 다음의 순서로 메소드가 실행된다.

1. Constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

 

Props(Properties)와 State

component에서 데이터를 제어하기 위해 Props와 State가 있다. 다음의 특성이 있다.

1. Props와 State에 변경이 생겼을 때, render()가 수행된다. 이는 UI에 바로 그려진다고 생각하면 될 것 같다.
2. Props는 고정된 값이고 Instance가 생성될 때 Parameter로 넘겨받거나 component에서 정의가 가능하다.
3. State는 변경가능한 값으로 상황에 맞춰 설정하면된다.

 

 

Props(Properties)

source라는 Props를 이용해서 이미지를 출력하고 있다. {pic}은 'let pic' 구문에서 선언한 변수를 참조하는 JSX 문법이다. 이런식으로 Javascript를 JSX에서 중괄호로 참조할 수 있다.

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

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://a.com/a.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

Greeting 객체 생성 시, name이라는 Prop을 넘겨주어 this.props을 통해 참조할 수 있다.

import React, { Component } from 'react';
import { 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>
    );
  }
}

 

State

보통 생성자에서 state를 초기화하고나서 필요할 때, setter를 호출하는 방식을 쓴다.

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

class Blink extends Component {
  constructor(props){
    super(props);
    this.state = { isShowingText: true };
  }

  componentDidMount(){
    // Toggle the state every second
    setInterval(() => (
      this.setState(previousState => (
        { isShowingText: !previousState.isShowingText }
      ))
    ), 1000);
  }
  render() {
    if (!this.state.isShowingText) {
      return null;
    } else {
      return (
      	<Text>{this.props.text}</Text>
    	);
    }
  }
}

export default class App extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
      </View>
    );
  }
}

 

Design

각 디자인을 구성하는 컴포넌트들(View 등) 마다 style 속성으로 지정한다.

1. width : 가로길이를 숫자 혹은 비율(%)로 지정
2. height : 세로길이를 숫자 혹은 비율(%)로 지정
3. flex : 크기를 비율(정수)로 지정
4. backgroundColor : 색깔영문명 혹은 #ffffff 혹은 rgb(255, 255, 255)

 

기본적으로 레이아웃은 세로로 누적되는 방식인데 flexDirection으로 가로, 세로 설정 가능하다.

1. flexDirection : 기본값은 column이고 row로 하면 횡으로 쌓임
2. alignItems : flexDirection과 수직한 정렬에 대한 값으로 flex-start, center, flex-end, stretch, baseline이 있다.
3. justifyContent : flexDirection과 수평한 정렬에 대한 값으로 flex-start, center, flex-end, space-between(양쪽정렬), space-around(공백있는 양쪽정렬)이 있다.