어제보다 더 나은 개발자 되기

Props 

리액트 네이티브를 아직 많이 다루어 보지 않았지만 형태를 보다보면 extends Component(상속) 를 해서 사용자 정의 Component를 만들 수있는 것으로 보인다.   

Props 은 Property의 약자로 보이나 C#의 Property와는 비슷한듯 하면서 차이가 있는 것 같다 이해가 되면 그 부분은 따로 남기자. 

아래 공식문서에 있는 코드를 보면 

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}}/>

    );

  }

}

이것만 보고 어떤 느낌인지 알겠는가?? 먼저 만들어진 공식문서에는 parameter 란 표현이 있다 이런 인자값의 내용이 바뀌는 것에 대응하는 parameter 부분이 props 이 된다. (리액트 네이티브 제작 원론 이라는 책을 보면 정적인 Component를 동적으로 변화시키기 위해 props을 사용할 수 있는 것으로 표현하고 있다. 

React Native에서 Image 태그만 보고 HTML의 img 태그를 떠올리기 쉽다 물론 React의 개념으로는 Image - img 가 대응하고 동일한 웹페이지를 보여주는 것은 맞지만 import { AppRegistry, Image } from 'react-native'; 구문을 보면 Image는 react-native의 Component 이다. 

즉 Component 라는 생각을 가지고 접근하면 Image라는 Componenet는 source, style이라는 속성을 가지고 있다고 볼 수 있다. 

위의 코드에서도 source={pic} 로 사용되고 중괄호 속의 {pic} 의 부분은 동적으로 들어갈 수 있다. 

여기까지의 내용으로 정리하자면 props 이라는 것은 하나의 특징을 가지고 있다. 

Componet안에 사용자 정의 속성을 만들어서 해당 부분을 동적으로 사용(바인딩) 할 수 있다. 

공식문서의 예를 하나 더 보자 점점 C#의 속성이랑 비슷한 느낌이 들기 시작한다 

import React, { Component } from 'react';

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

class Greeting extends Component {

  render() {

    return (

      <Text>Hello {this.props.name}!</Text>

    );

  }

}

export default class LotsOfGreetings extends Component {

  render() {

    return (

      <View style={{alignItems: 'center'}}>

        <Greeting name='Rexxar' />

        <Greeting name='Jaina' />

        <Greeting name='Valeera' />

      </View>

    );

  }

}

Greeting 이라는 사용자 정의 Componenet를 만들었다. 그리고 default Component에서 불러냈으며 name이라는 Props을 각각의 Componet에서 사용하고 있다. View Componet는 HTML의 div와 대응하기 때문에 일정 영역에(Center Style 속성을 사용 중이다) 단순히 텍스트로 이름들이 출력된다. 

여기서는 this의 props에 접근하고 그것의 이름은 name으로 정했다 즉 Greeting 이라는 Componenet를 사용할 때 name 속성에 값을 넣으면(지금은 문자열) 해당 Component가 출력될 때 변경되는 값을 동적으로 보여준다 즉 Component를 동적으로 재사용할 수 있게 된다는 것이다. 

공식문서에서 이해된 내용을 정리하면 

1. Component 안에 사용자 정의 속성을 만들 수 있다. 

2. Parameter 라고 설명한 이유를보면 Component를 사용할 때 해당 속성에 값을 실어 보낼 수 있다. Componet != (일반적인)Class 로 보이지는 않는다. 다만 class extends Componet 는 XML 처럼 component를 사용할 수 있고 속성을 매개변수로 값을 실어서 보낼 수 있다.  

name을 props으로 사용했고 Greeting 이라는 Componenet를 커스터마이징해서 사용 했다. 이 Component는 Class 처럼 재사용이 가능하고 필요에 따라 수정하거나 값을 바꺼서 동적인 화면을 구성할 수 있다. 

마지막으로 한줄로 정리 

Props 는 react-native의 Componet를 사용자 정의로 해서 재사용가능하게 만들 수 있고 해당 Componenet를 사용할 때 속성을 동적인 화면으로 보일 수 있게 해준다. 

자마린은 종말될 것으로 예언하고 있다 

React Native는 진화된 하이브리드 앱 개발 프레임워크다 

기존의 웹에서 하이브리드를 지원하기 위해 다양한 개발방법이 나타났다 

React Native와 비교할 군은 크게 2가지 이다. 

1. HTML5 웹 앱 

   기본적으로 HTML CSS Javascrip를 통해 만든다 

   따로 앱스토어에서 설치하지 않아도 되지만 DOM이라는 웹 문서를 로딩하는 것이 성능적으로 최악의 단점이다. 

   네이티브 기능을 사용하지 못하고 웹브라우저에서 보는 것과 비슷하다 

2. WebView 기반의 하이브리드 앱 

   단순히 모바일 플랫폼만 공유되는 것이 아니라 Web 기술과 Native 기술도 혼합되어 있다 

   네이티브 앱처럼 동작하는 것처럼 보일 수 있으나 Native 위의 WebView에서 호출하는 구조이다.  느리다고 한다 

React Native의 React는 기본적으로 1. React 웹 앱 기반이다. 즉 HTML과 CSS JavaScript를 사용한다. 

단, 차이가 있다 아래는 그 차이가 기존 웹 앱의 성능을 개선한 점을 설명한다. 

React Native가 다른 웹앱 or 하이브리드 앱보다 성능적으로 좋은 이유 

1. 기존 웹 처럼 HTML을 사용하지만 실제로 호출되는 것은 Native Module 이다. 

   <div> <span> 등 HTML의 태그 형식을 따르지만 실제로 보여지는 것은 Native View의 Component로 치환된다. 

   실제 코딩도 HTML과 똑같지 않고 치환되는 Tag 선언을 따른다. 즉 네이티브를 호출할 수 있는 React Native만의 문법이 있다. 

   내부에서는 Native를 호출해서 구현하기 때문에 빌드과정에서 Object C나 Java 코드와 같은 Native Code와 매칭된다. 

2. 기존의 Native앱은 Compile 과정을 거치기 때문에 변경사항이 생기면 새로 Compile을 거쳐 수정사항을 반영하는 시간이 있었다 

   React Native는 이런 Recompile 거치지 않고도 View의 Tag를 변경해서 Reload 만으로 수정사항을 확인할 수 있다 이것은 개발 생산성과 연관이 있다. 

3. Native Code로 치환되고 그것과 Bridge로 연결된다는 이점은 필요한 Native Module을 직접 제작하거나 다른 사람이 만든 Module을 재활용할 수 

   있다는 이점이 있다.

   React Native는 Java나 Object-C, Swift로 만든 Module과 연결되기 때문에 자유도가 높은 Native 개발이 가능하다. 단 웹언어외에 Native 언어로도 

   구현을 해야 한다는 개발자의 역량에 대한 부담이 생긴다. 이것은 장점이자 단점이다.  

4. 위에서 웹 언어의 DOM 문서의 로딩이 오래 걸린다는 단점을 지적했다. 그 부분을 개선하기 위해 React Native는 Virtual DOM이라는 기술이 도입되었다

   이 기술은 간단히 말하면 해당 페이지의 모든 DOM을 로딩하는 것이 아니라 변경사항이 생긴 DOM 부분만 로딩해서 반영한다. Virtual DOM은

   WebView 그리고 웹앱의 단점을 커버해줄 것으로 보인다 단 객관적인 비교 수치나 테스트는 해봐야 알 것 같다 

5. WebView를 거치지 않고 Native Module을 호출할 수 있기 때문에 WebView에 의한 지연이 개선되었고 내부에서 JS Thread와 UI Thread가 단일 Process

  로 동작하는 것이 아니라 병렬과 비동기로 동작 하도록 설계되었기 때문에(이 부분은 확인해 볼 것) 단일 Thread의 단점을 커버해준다. 즉 이런 부분을 

  보면 기존의 하이브리드 앱과 웹앱의 단점을 모두 개선하려고 노력한 부분이 느껴진다.   

React Native 란? 

JavaScript 기반의 React를 사용해서 모바일 앱을 제작할 수 있는 오픈소스 프로젝트 (또는 어플리케이션 개발 프레임워크)

단순히 라이브러리라고 하기에는 개발 방법에 대한 구체적인 방법과 지원해주는 API들이 있으니 프레임워크라고 생각 할 수 있다 다만 React Native는 자체적으로 Native App 개발에 대한 컴파일러나 인터프리터가 해석해서 개발자가 작성한 코드가 프레임워크에 의해서 Callee(피호출자)로 동작하는게 아니라 실제 Native API를 Caller로서 동작하기에 API들을 호출하기 위한 집합 즉 라이브러리 성격이 강하다. 

위의 구분을 타이트하게 잡을 필요는 없을 것 같다 MFC도 Win32API를 감싼 라이브러리로 해석되지만 개발 프레임워크로도 불린다. 즉 개발규칙의 자유도가 저수준인지 고수준인지에 대한 구분정도에서 프레임워크와 라이브러리를 구분하면 될 것이다. 

관련 링크 : http://web-front-end.tistory.com/63 (그나마 구분이 가는 내용)

특징 (https://facebook.github.io/react-native/)

1. React Native는 모바일 웹앱, HTML5앱, 또는 Web View 기반의 하이브리드앱이 아니라 실제 Native 성격의 앱 개발이 가능하다 

2. JavaScript Code가 변했을 때 다시 빌드를 하지 않아도 재로딩만으로도 변경된 코드를 적용가능하다 

3. 필요한 경우 JavaScript Code에서 연결되는 Bridge를 통해 Object C, Swift, JAVA로 작성된 Native Module를 작성하거나 호출할 수 있습니다. 

필수설치 모듈 (Windows에서 Android App 개발) 

1. Chocholatey (https://chocolatey.org/)  -> 이걸안쓰면 Yarn 이라는 Package Manager도 있다 

 - Package Manager로 인터넷 연결이 되어 있으면 쉽게 Node.js, Python2 를 설치 가능 

   choco install -y nodejs.install python2 jdk8

   Node.js (오프라인 설치 : https://nodejs.org/en/download/)

   Python2 (오프라인 설치 : https://www.python.org/downloads/windows/)

2. NPM 설치 (Node.js command prompt) 

   npm install -g react-native-cli

3. JDK8 설치 

   Java Develop Kit (http://www.oracle.com/technetwork/java/javase/downloads/index.html)

   최신버전인 10버전으로 설치를 진행해봤으나 React Native 빌드시 Java 버전 오류 발생으로 8로 다운그래이드

   JAVA_HOME 환경변수로 등록

3. Android Studio 

   Android Studio (https://developer.android.com/studio/)

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

4. Android SDK Manager 

    Android 6.0 (Marshmallow)  

• Google APIs
• Android SDK Platform 23
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image

   Android SDK Build-Tools (Marshmallow의 API 레벨이 23이다 안드로이드는 플랫폼(OS)과 API 레벨이 같이 올라간다)

• 23.0.1

   ANDROID_HOME 환경변수로 등록

5. 애뮬레이터 설치  

  Android Studio 에서 Android Virtual Device Manager -> Create Virtual Device 

  주의사항 : HAXM 이 설치 되어야 하며 그 기술을 사용하려면 Intel Virtualization Technology 기능이 켜져 있어야 함 

                해당 기능이 꺼저있으면 경고문구가 나오고 Mainboard의 BIOS 메뉴에서 켜줘야 함

6. 편집기 설치 

   Visual Studio Code 설치 (https://code.visualstudio.com/docs?start=true)

   확장기능 설치해서 툴 기능 강화 

   디버깅이 지원된다. (필수) 

(https://www.vobour.com/vscode-%EC%B6%94%EC%B2%9C-%EC%9D%B5%EC%8A%A4%ED%85%90%EC%85%98%EA%B3%BC-%EC%84%B8%ED%8C%85-vscode-recommended-e)

7. Expo 설치 (https://expo.io/tools#xde) 

   Expo는 필수설치는 아니지만 쉽게 빌드해서 스마트폰까지 배포가 가능하다 

   Expo를 사용하면 장점 

   - 지원해주는 Library 설치

   - 쉽게 빌드 

   - 쉽게 배포?? 아닐 수 도 있음 

(이것은 수정하고자 한다. 따로 네이티브 모듈을 붙여서 배포하려면 expo에서 detach를 해야 한다고 한다. 이런 제한된 기능 때문에 데모앱을 만들기에 좋고 실제 서비스 앱용으로는 적합하지 않을 수 있다. )  

   - Expo에서 개발자 옵션에서 핫 리로딩을 키려면 Ctrl + M 을 누른다

8. Git을 통한 소스버전 관리 설치 

   Git (https://git-scm.com/downloads)

   VS Code에서 GitHub 연동으로 버전관리 설정 

9. 단위 테스트를 위한 Jest 연동 

   JavaScript Unit Test (http://jestjs.io/)

10. Create Project (Example)

   프로젝트를 설치할 경로를 정하고 (ex: C:\dev 생성)

   react-native init AwesomeProject

11. Run react-native App 

   애뮬레이터가 켜저있는 상태에서 command 명령 실행

   cd AwesomeProject 

   react-native start         (이것은 npm start로 해도 동일하고 하지 않아도 아래 run-android를 하면 동일하게 시작된다.) 

   새로 cmd 창을 뛰어서 아래 명령어로 빌드 한다

   react-native run-android (공식 문서에는 이 명령어만 되어 있음 실행시 node.js 구동)

   Hello world 같은 화면이 구동되면서 기본 셋팅 완료

12. react-native 확인 -> 기본설치 되는 폴더의 설치되어 있는 node module에 가면 있다   

   C:\WeatherProject\node_modules\react-native