React와 React-Native의 차이

React

: 페이스북에서 만든 프론트엔드 JavaScript

: 웹 페이지 등 UI 개발을 위해 사용

: Dom이 생성이 되고 난 뒤에 Virtual Dom을 이용하여 변화된 곳을 캐치하여 변화된 Dom으로 이동

 

※ Dom (문서 객체 모델, Document Object Model)

: 웹 페이지 내의 모든 콘텐츠를 객체로 나타내주는 모델

 

※ 참조

프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정

모던 자바스크립트 (문서) 18-1. 브라우저 환경과 다양한 명세서

 

 

 

 

 

 

 

 

React-Native

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

: Bridge를 이용하여 ios, android 각각의 네이티브 언어에 접근가능 

 

 

 

 

 

 

React와 React-Native의 차이점

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

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

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


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

1. 화면 출력 

- React

: ReactDom

 

- React-Native

: AppRegistry

 

 

 

 

 

import React from 'react';

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

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>
    );
  }
}

2. 문법

- React

: JSX + HTML

 

- React-Native

: JSX

 

 

 

 

 

 

 

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;

3. CSS

- React

: 기존의 CSS 지원

 

- React-Native

: 기존의 CSS 지원안함

: flexbox를 이용한 레이아웃 제작 제공

 

 

 

 

 

 

리액트네이티브와 리액트

- 공통점

: 둘 다 JavaScript 기반으로 문법이 같고, React에서 사용하는 기능을 RN에서도 사용 가능

: JSX를 지원하므로 JSX 문법을 통해 컴포넌트를 정의

 

- 차이점

: RN은 <View> (React의 <div>)라는 컴포넌트를 ios 및 android에 대해 각 OS에 대해 실행할 수 있는 형태로 변환됨

: 큰 차이점은 없으나 아래와 같은 부분들이 다름

react    --> react-natve

div       --> View

button  --> TouchableOpacity

스크롤되는div --> ScrollView

 

 

 

 

 

 

 

 

 

 

Refference

React-Native 와 React의 차이

리액트(react) vs 리액트 네이티브 (react-native) 차이점이 뭐야?