Technology – ReactSpring

리액트-네이티브는 페이스북에서 개발한 오픈소스 모바일 프레임워크이며, 2018년 이후 국내에서도 많은 마니아 층이 형성되고 있습니다.

대형 포털이나 통신사, 최신 트렌드에 민감한 리딩 스타트업에서 리액트-네이티브로 모바일 앱을 개발하는 비중이 점점 높아지고 있으며, 직방/배달의민족/당근마켓 모바일 앱이 리액트-네이티브로 개발된 사례입니다.

리액트-네이티브는 타입스크립트(또는 자바스크립트) 언어로 개발하는 것이 가장 일반적이며, 하나의 소스로 안드로이드/iOS 앱을 동시에 개발할 수 있습니다. 개발 과정에서는 UI/UX, 상태관리, 코드푸시 기능등을 필수적으로 사용하게 되며 안드로이드및 iOS 코드작업도 일정부분 필요하게 됩니다.

– 네비게이션
– UI/UX
– 생명주기

– 상태관리 (Props, State, Redux, MobX)
– 네이티브 모듈
– 코드푸시

(타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어)

그외에도 백엔드 API 연동과 푸시메시지 연동을 필수적(혹은 선택적)으로 사용하게 되며, 백엔드 API 서버및 푸시메시지 서버기능을 구글 Firebase나 아마존 서비스로 구현하면 별도의 서버를 구축할 필요가 없게 됩니다.

– 백엔드 API 연동 (Axios)
– 푸시
– 스플래시
– 테스트 도구

타입스크립트로 작성된 리액트-네이티브 샘플 소스

import React, { Props } from 'react'
import { Text, RefreshControl, View , StyleSheet, ScrollView, Dimensions } from 'react-native';

export default class StatisticsScreen extends React.Component <Props> {
  constructor(props: Readonly<{}>) {
      super(props)
  }
    
  state = { 
      refreshing: false
  }

  _onRefresh =() => {
    this.setState ( {refreshing: true} );

    this.load_chart ();
  }

  render() {
    return (
        <ScrollView refreshControl = {
            <RefreshControl 
                refreshing={this.state.refreshing} 
                onRefresh={this._onRefresh}
              />
          } >

        </ScrollView>          
      );
  }

  private componentDidMount() {
    this.setState ( {refreshing: true} );
    this.load_chart ();
  }

  private load_chart () {
    setTimeout(() => {
      this.setState ( {refreshing: false} );
    }, 1000);  
  }
}

import React, { Props } from 'react'

import { Text, RefreshControl, View , StyleSheet, ScrollView, Dimensions } from 'react-native';

export default class StatisticsScreen extends React.Component <Props> {

constructor(props: Readonly<{}>) {

super(props)

}

state = {

refreshing: false

}

_onRefresh =() => {

this.setState ( {refreshing: true} );

this.load_chart ();

}

render() {

return (

<ScrollView refreshControl = {

<RefreshControl

refreshing={this.state.refreshing}

onRefresh={this._onRefresh}

} >

</ScrollView>

);

}

private componentDidMount() {

this.setState ( {refreshing: true} );

this.load_chart ();

}

private load_chart () {

setTimeout(() => {

this.setState ( {refreshing: false} );

}, 1000);

}