React native intro

한참 안드로이드 개발을 할 때 하이브리드 앱이라는 개념을 접했고 당시 크로스 플랫폼을 지원하는 프레임웤을 사용하여 테스트 앱을 만들어보고 발전 가능성의 한계를 느꼈던 시절이 있었습니다. 

 

그리고 몇년만에 React native라는 녀석을 다시 접하면서 하이브리드 앱에 대한 관심이 다시 생겼네요.

 

Facebook이 개발, 다양한 서비스 업체가 지원하고 있으며 종종 관련 기술 경험자를 찾는 회사도 보입니다. 

 

고 차원의 플렛폼 의존도가 높은 서비스가 아닌 데이터 인입 차원의 서비스라면 네이티브 개발을 대신하는 좋은 방안이 될 것으로 보입니다. 

 

https://www.manning.com/books/react-native-in-action

React Native in Action

본 포스팅은 위 책을 베이스로 진행 할 예정입니다. React native 초기(2017년?)에 발간된 책을 처음 봤었는데 이미 많은 업데이트가 진행되어 설치부터 수 많은 삽질을 하다가 나가 떨어진 기억이 있습니다. 

* 특히 보편화되지 않은 기술에 대한 책을 고를땐 되도록 최신 발간된 것을 참고하고 공식 사이트를 통해 영어 공부?도 병행하심이..

https://lowcrash.tistory.com/23?category=783777 (옛 삽질의 흔적)

 

  iOS(Object C or Swift), Android(Java or Kotlin)을 따로 개발 할 필요 없다.

React native의 경우 기존 하이브리드 앱(웹 뷰 렌더링) 프레임워크와 달리 컴파일을 통해 자바스크립트 코드를 네이티브 코드로 변환하여 고성능 하이브리브 앱을 개발할 수 있다.

- iOS, Android 개발자가 따로 필요하지 않다

- 빌드가 빠르다. 코드 수정 후 저장하면 바로 결과 화면에 반영된다.

 

Component : 가장 중요한 키워드로 앱을 구성하는 조립 블럭 (stateful(속성 값이 있는), stateless(재사용)로 구분)

 

* React native의 기본적인 code snippet (주석 부분만 보고 넘어가자)

import React, { Component } from 'react'  // 1. react library에서 React와 Component를 가져온다.
import {
  AppRegistry,
  StyleSheet,
  View,
  Text
} from 'react-native' // 2. 다양한 UI component를 가져온다.
import API from './api' // 3. import other component

class blankRNApp extends Component {
  constructor () {
    super()
    this.state = { name: 'chris' }  //stateful
  }
  componentDidMount () { // 4. last method of lifecycle
    API.getName().then((data) => {
      this.setState({ name: data })  // 5. call render() 
    })
  }
  render () { // 6. rendering
    return ( //render must return native item or null or false
        <View> // JSX

            <Text> Hello there, {this.state.name} </Text>

        </VIew>
    )
  }
}

const styles = StyleSheet.create({ // 7. style 선언
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
})

 

Lifecycle method : constructor, componentDidMount, render 등 클래스가 생성되면서 실행되는 일련의 메소드

 

CLI, npm, Xcode, ES2015, MVC, SPA... 알고 있으면 좋지만 필수는 아니다.. 어쩌란 말인가..

(e.g. : ES2015에서는 const 대신 import를 사용)

 

JSX : XML 처럼 보이는 자바스크립트 구문 확장 (e.g. : <Text> Hello </Text> )

React : 기존 DOM 처리 방식에서 in memory DOM을 통해 필요 부분만 갱신하여 성능 향상

Bridge : 리액트-네이티브 계층과의 통신 채널

단방향 데이터 흐름 : 최상위 컴퍼넌트의 데이터가 변경되면 자식 컴포넌트는 props로 변경된 데이터를 전달 받고 갱신됨

hot reloading : 개발시 변경된 부분만 빠르게 반영

transpilation : transpiler(바벨)가 특정 언어로 작성된 코드를 다른 언어로 변환. 언어의 최신 기능 사용

 

Custom component 만들기(기본)

class Home extends Component { ... }

-> import한(위 code snippet 주석 1) Component(객체 구조 분해 할당)를 상속하여 Home instance 생성

 

Render 함수

다른 함수의 실행

Exports

export default Home

-> 다른 Component에서 Home을 사용하려고 할 때

 

Stateless Component

const Header = () => (

    <View>

        <Text>HEADER</Text>

    </View>

)   

-> render() { ... <HEADER /> } 이런식으로 다른 component에서 재사용 가능

 

이것으로 React native의 기본적인 개념은 정리?를 하였고 다음 포스팅에서는 기본 프로젝트를 돌려보겠습니다.

* 본 포스팅에서 Bold된 내용은 꼭 숙지해 주세요. 새로운 개념을 익힐때는 그 안에서 사용하는 키워드에 익숙해지는게 1순위 입니다.