React.js와 React-Native의 차이

React

: 페이스북에서 만든 프론트엔드 JavaScript 라이브러리다.

React-Native

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

 

React와 React-Native의 동작

React 

: React는 Dom이 생성이 되고 난 뒤에 Virtual Dom 을 이용하여 변화된 곳을 캐치하여 변화된 Dom으로 변경한다.

React-Native

: React Native 코드를 실행하게 되면 Bridge를 이용하여 ios, android 각각의 네이티브 언어에 접근 할 수 있게 한다.

동작

React와 React Native 차이점

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

React

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

React Native

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';


AppRegistry.registerComponent(appName, () => App);

 

2. 두개 다 JSX 문법을 사용하지만 React는 HTML문법을 사용하고 React Native는 HTML 문법을 사용하지 않는다.

React

import React from 'react';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <h1>React</h1>
        Hello React!
      </div>
    );
  }
}

React-Native

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

class HelloMessage extends React.Component {
  render() {
    return (
      <View>
        <Text>React-Native   Hello React-Native!</Text>
      </View>

 

3. React-Native는 기존의 CSS를 지원하지 않는다.

flexbox를 이용한 레이아웃 제작을 제공한다.

React-Native Style

import React, { Component } from 'react';
import {View , StyleSheet} from 'react-native';

class Card extends Component {
 render(){
      return (
        <View style={styles.Card}>
          <View style={styles.Card_title} />
          <View style={styles.Card_details} />
        </View>
    )}
}

const styles = StyleSheet.create({
  Card: {
    flex: 1,
  },
  Card_title: {
    flex: 0.5,
    backgroundColor: 'blue',
  },
  Card_details: {
    flex: 8,
    backgroundColor: 'green',
  }
})

export default Card;

위 코드의 결과 화면