React / React Native

React란

페이스북에서 만든 프론트엔드 프레임워크이다.

React

React는 Dom이 생성된 후 Virtual Dom을 이용하여 변화된 곳만 캐치하여 진행된다.

Virtual Dom 원리

Virtural Dom은 diffing을 통해 rerendering 을 한다.

DOM 이란

문서객체모델 DOM(Document Object Model)은 브라우저에 내장되어있는 web API

React-native란

React방식의 네이티브 앱을 개발할 수 있는 페이스북 오픈 소스 프레임워크

React-Native

React Native 코드를 실행하게 되면 Bridge를 이용하여 IOS/Android 네이티브 언어에 접근이 가능

동작원리

Main Thread & Shadow Thread

• UI Thread라고 불리기도 하며 네이티브 안드로이드와 IOS UI 랜더링에 사용됩니다.

• 예를 들면 안드로이드에서는 measure/layout/draw 작업을 할 때 사용됩니다.
  

React와 React Native 차이점

1.화면 출력을 React 는 ReactDom을 사용하지만 React Native는 AppRegistry 를 사용한다.

React

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './asset/style.css';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root'),
);

React Native

/**
 * @format
 */

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
// import NewWoundDrawScreen from './src/screens/wound/draw';
import NewWoundNavigator from './src/navigators/newWound';
import newIndex from './src/newIndex';

AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent('draw', () => newIndex);