React Native란?
React는 유저 인터페이스 구현을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다.
React는 하나의 코드로 ios, android 환경에서 모두 구현이 가능하다는 장점을 갖고 있다.
React Native rendering 원리
React는 VirtualDOM이라는 가상 DOM을 이용하여 화면을 수정하면 모든 화면 출력 flow를 실행하는 React와는 달리 실제 변화는 가상의 DOM에 적용시키고 최종적인 결과만 DOM에 적용시킨다.
가상의 DOM에서는 필요한 곳만 계산하고 필요한 최사한의 변경사항만 랜더링 하기에 매우 효율적이다.
React Native workflow
리액트 네이티브 소스 -> Page render -> 리액트 컴포넌트 DOM에 마운팅 -> 브리지 -> 리액트 컴포넌트 랜더링 -> 해당 플랫폼의 process
위 과정의 work flow를 가진다. 브릿지를 이용하기 때문에 ios 혹은 android모두 구현할 수 있는 것이다.
React Native 프로젝트 구조
1. index.js
index.js는 프로젝트를 실행할 때 가장 먼저 실행되는 기점이다.
index.js를 열어보면 App.js를 가져와서 컴포넌트로 등록한다. 그로인해 프로젝트를 실행하면 App.js에 작성된 내용을 볼 수 있게 된다.
2. App.js
react native에서는 View, Button, Text, ScrollView 등 여러 가지 기본 컴포넌트를 제공한다.
그런 컴포넌트를 이용하여 실제 디바이스에 보이는 화면을 만든다.
3. app.json
app.json에는 프로젝트의 이름과 앱의 이름이 작성되어있다.
4. android/
안드로이드 네이티브 모듈을 담당하고 있는 부분이다.
react-native에서 지원하지 않는 기능들을 사용하기 위해서는 네이티브 모듈을 직접 구현해야 한다.
npm에 공개 모듈로 올려놓은 모듈들을 사용하기 위해 dependency 등을 설정하여 사용할 수 있다.
5. ios/
ios의 네이티브 모듈을 담당하고 있는 부분이다.
4번과 동일한 역할을 수행한다.
6. node_modules/
프로젝트와 관련된 모듈이다.
npm을 통해 설치한 모듈도 이곳에 위치하게 된다.
7. package.json
프로젝트와 관련된 모듈들이 기록된 파일이다. 이를 통해 모듈들의 버전 관리를 할 수 있다.
8. yarn.lock
7과 유사한 기능을 한다.
