리액트 네이티브란 무엇인가? What is React Native?

리액트 네이티브란 무엇인가!

출처:https://www.tablexi.com/mobile/react-native-stack/

네이티브 웹 어플리케이션을 빌드하게 도와주는 UI 라이브러리리다.

리액트 네이티브는 html, css 어플리케이션을 생성하지 않는다.

html, css앱을 만드는 아파치 코르도바, 아이오닉과 같은 것과 차이점은

이것은 네이티브라는 점이다.

즉, 이건 objective-c 이고, java 이다.

여기서 objective-c는 iOS를 위한거고, java는 android를 위한거다.

이것이 자바스크립트라서 네이티브라고 생각을 안하게 되는거 같다.

마지막 컴파일링 할때, 각각 iOS(object-c)/android(java) 네이티브 코드로 실행 된다.

리액트 네이티브는 어떻게 구동될까?

일단 JSX, 자바스크립트로 작성을 하고, 그 뒤에서 자바스크립트가 objective-c  혹은  java로 변환 되는거다.

페이스북의 멋진 기술의 의하여!!

출처:https://www.smashingmagazine.com/2016/08/test-automation-frameworks-for-react-native-apps/

그 기술에 의하여  js-obective-c의 브릿지, 혹은 js-java 가 연결되는거다.

import React, { Component } from 'react';

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

class WhyReactNativeIsSoGreat extends Component {

render() {

return (

If you like React on the web, you'll like React Native.

You just use native components like 'View' and 'Text',

instead of web components like 'div' and 'span'.

);

}

}

여기보면, 리액트때 보았던 코드와 비슷하다는 것을 알수 있다.

첫째 줄을 보면 리액트도 있고 컴포넌트도 있다. 

다만 차이점은 둘째 줄에 다른 패키지를 쓰는데, 그 패키지 이름이 '리액트 네이티브'인 것이다.

웹에서 div, span이 있는 것 처럼, 리액트 네이티브에는  view, text와 같은 페이스북팀이 만든

다른 요소가 존재한다. 이 요소들은 다 네이티브 코드로 변환된다.

리액트 네이티브의 장점은 

첫째!  자바스크립트를 활용할 수 있다는 것,

두번째!  커뮤니티가 엄청 크다는 것,

세번째!,  많은 회사가 리액트 네이티브를 쓰고있다는 것,

(instagram, Airbnb, Facebook, ...)

얼마나 많은 회사가 react-native를 사용하는지 알고 싶으면 아래 링크에서 확인!

https://facebook.github.io/react-native/showcase.html

마지막! 최고의 장점은, iOS-Android 앱 사이 코드를 공유할 수 있다는 것.

추가적으로 레이아웃이 Flexbox랑 구현된다는 것도 짱이다.

모바일을 위한 레이아웃을 플렉스박스로 구현하면 된다.

react-native로 기깔난 네이티브앱 하나 만들어봐야지!