REACT-NATIVE BASIC

what is react native?

공식 홈페이지에 따르면

react-native(이하 native)는 네이티브 개발을

JS라이브러리인 react를 통해 구현할 수 있도록 한다.

무슨말이냐 하면,

작성은 js언어로 하는데, 렌더링 결과는 native 플랫폼 UI 를 return합니다.

이 때, <View>나 <Text>같은 기본제공 컴포넌트는 개별 플랫폼(안드로이드/ios)의 UI-building block들과 mapping이 되어있습니다.
웹 개발에서 사용하는 react는 web component와 mapping이 되어 있습니다.

내가 쓴 코드에 대한 결과 확인이 매우 빠릅니다. js의 장점 덕분에, build를 기다릴 필요 없이, 저장과 동시에 결과를 확인 할 수 있습니다.

<View><Text>Hello world!</Text></View>

위는 JSX코드의 예 입니다.

JSX는 XML을 JS로 표현하기 위해 만들어졌습니다.

우리는 미리 만들어져 있는 component들을 사용해 작성하지만

html에서 볼 때는 <div>나 <span>과 같은 것으로 표현이 될 것입니다.

PROPS

component를 ‘customize’할 때, 여러 parameter를 통해 할 텐데,

이때 이 parameter를 props라고 부릅니다. (properties의 약어)

<Image source = {pic} style = {{width:193, height:110}}/>

기본적인 native의 컴포넌트 중 하나인 <Image>를 예로 들겠습니다.

source라는 prop을 통해, 어떠한 이미지를 보여줄 지 control할 수 있습니다.

brace (={})를 통해 ‘pic’이라는 변수를 넣었습니다. 이처럼,

JS표현식을 JSX에서 쓰기 위해서는 brace내에 넣어줘야 합니다.

STATE

state는 props와 마찬가지로, component를 customize하기 위해 존재합니다.

props는 호출한 주체(parent)에서 보내주는 값에 의해 수동적으로 설정,

불변

하게 됩니다. (컴포넌트의 lifetime까지)

변화하는 값을 통해 customize하기 위해서 STATE를 사용하게 됩니다.

일반적으로 contructor에서 state를 선언,초기화 합니다.

그리고 setState메소드를 통해 변경을 합니다.

Redux나 Mobx가 data flow를 control하기 위해서 사용하는 state contatiner의 예 입니다.

setState — rerender가 일어나게 됩니다. (life-cycle에 의해서)

Style

native에서는 application의 style을 js를 통해 control합니다.

모든 core component는 ‘style’이라는 이름의 prop을 수용합니다.

style컴포넌트는 css on web과 거의 동일한 이름과 값을 갖습니다.

다만 하이픈(background-color)대신에 camel casing(backgroundColor)를 사용하는 차이가 있습니다.

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
  }
}

위와 같이, object처럼 사용할 수 도, array로 지정할 수 도 있습니다.

array로 적용할 경우, 더 큰 index를 갖는 style이 덮어 씀으로,

일종의 style inherit을 구현할 수 있습니다.

component가 복잡해지면, 위와 같이 StyleSheet.create를 이용하여 한 장소에서 여러 style을 정의하는 것이 깔끔합니다.

Height, Width, Flex

style prop 에 width와 height속성을 이용해 fixed-sizing을 할 수도 있고

<View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>

<View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>

flex 속성을 이용해, 비례적으로 정의할 수 도 있습니다.

단, flex를 사용할 경우, 부모 컴포넌트의 사이즈가 기준이 되기 때문에,

부모는 고정된 width,height혹은, flex로 size에 대한 정의가 되어 있어야 합니다.

그러지 않을 경우, 부모는 0의 dimension을 갖고, flex 자식들은 보이지 않을것입니다.

flexDirection

자식들의 배치 방향을 control 합니다.

row(-reverse) : 자식들을 같은 열로 배치합니다.

column(default)(-reverse) : 자식을 top부터 bottom까지 수직으로 배치합니다.

TextInput

기본으로 제공되는 컴포넌트 중 하나입니다.

<View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>

‘onChangeText’ prop은 TextInput내의 text가 변할 때 마다 호출할 function을 지정합니다.

‘onSubmitEditing’ prop은 text가 제출 될 때 호출 할 function을 말합니다.

Handling Touches

<Button>은 모든 플랫폼에서 훌륭하게 render되는 컴포넌트 입니다.
(기본 색상이나 디자인은 플랫폼에 따라 다릅니다)

‘onPress’ prop을 이용해 클릭 시 호출 할 function을 지정 할 수 있습니다.

native를 통해 버튼의 여러가지 특징을 줄 수 있습니다.

TouchableHighlight : 클릭 시 , 배경이 어두워 집니다.

TouchableNativeFeedback : 안드로이드에서 클릭시 ink surface reaction

TouchableOpacity : 클릭 시, 해당 버튼의 opacity를 줄입니다. 배경은 그대로.

TouchableWithoutFeedback : 클릭 모션만 빼고 싶을 때.

onLongPress : 꾹 누르고 있었을 때 이벤트 실행.

ScrollView

기본 제공 컴포넌트 입니다.

<ScrollView>
 <Text style={{fontSize:96}}>Scroll me plz</Text>
 <Image source={{uri: “https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
 <Image source={{uri: “https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
 <Image source={{uri: “https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
 <Image source={{uri: “https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
 </ScrollView>

pagingEnabled prop을 통해 스와이프시 페이징 하도록 구성할 수 있습니다.

(안드로이드에서 ViewPager 컴포넌트를 통해서도 구현이 가능합니다)

Using List Views

FlatList 와 SectionList가 있습니다.

FlatList는 보다 긴 길이의 리스트와 리스트의 갯수가 변하는 경우를 표현하는데 적절합니다.

ScrollView와 다르게, FlatList는 현재 화면의 사이즈에만 들어가는 데이터만을 렌더링합니다.

<View style={styles.container}>
 <FlatList
 data={[
 {key: ‘Devin’},
 {key: ‘Dan’},
 {key: ‘Dominic’},
 {key: ‘Jackson’},
 ]}
 renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
 />
 </View>

‘data’ prop의 array를 ‘renderItem’에서 JSX로 어떻게 return할 지 정합니다.

Networking

native에서의 통신은

기본적으로 XMLHttpRequest 을 기반으로 설계되었습니다.

따라서 FETCH를 권장하기는 하지만,

XML…방식을 사용하는 frisbee나 axios들을 사용할 수 도 있습니다.

WebSocket도 지원합니다.

React Native · A framework for building native apps using React