[React Native] What is react native

React.js

User interfaces를 빌드하기 위한 JavaScript Library. Web App을 개발하기 위해 보통 사용됨.

web render. React itself is Platform agnostic. 브라우저 등에 상관없이 유연하게 사용가능하다.

 

React Native

"special" React componets의 집합인 분리된 라이브러리이다.

Components compiled to Native Widgets.

Native Platform APIs exposed to JavaScript.

Connects JavaScripts and Native Platform Code. 자바스크립트 코드를 ios나 Android코드로 만들어낼 수 있다.

 

React.js + React Native = Real Native Mobile Apps (IOS, Andriod)

 

대충 코드들이 이런식으로 매핑이 된다고 한다... 

 

리엑트 네이티브로 짠 코드가 앱으로 매핑되는 것을 그림으로 나타낸 것이다.

모듈과 연결해주는 Bridge는 리엑트 네이티브에서 자동으로 제공해주는 것이고 JavaScript code는 앱 내에서 동작하게 된다.

리엑티브에서 JavaScript Code와 Component를 이용해서 코드를 짜기만하면 된다.

 

+) 컴포넌트란, 기능을 단위별로 나눠놓은 단위이다. 앱 화면의 여러 구성요소들은 여러가지 컴포넌트들로 이루어져 있는 것이다. 

 

Expo-cli vs react-native-cli

Expo를 통해서 자주사용하는 다양한 기능들을 편하게 사용할 수 있다.

하지만  Expo에서 지원하지 않는 기능이 있어 제한될 수 있다고 한다. 추가적인 java나 object-c를 작성하지 못하고 외부라이브러리를 사용하지 못하는 단점이 있다.

(본인은 이미 Expo를 설치했다..)

 

Expo를 사용해서 publish app 도 가능하고 코드 변경사항이 바로 로드되는 것을 확인할 수 있다.

 

React native Project 구조

expo-shared는 건드릴 일이 없을거고

assets는 아이콘등과 같이 앱 디자인들에 사용될 이미지 파일같은걸 저장하는 곳,

node_modules는 dependency들이 저장되어있는 곳이다. 건드릴일 없고 건드리면 안된다.

gitignore...

watchmanconfig : expo

App.js : 랜더링, screen

app.json : configuration app.

....

 

App.js 파일을 보면 HTML문법과 비슷한 내용이 들어있는 함수를 확인할 수있다. react-native의 View Text요소를 사용한다.

style은 css와 유사한 문법을 따르는 것을 확인할 수 있다.

 

출처/참조

https://youtu.be/qSRrxpdMpVc