React-Native vs React

DOM?

- Document Object Model. HTML, XML 문서의 프로그래밍 interface

- 웹 페이지의 객체 지향 표현

- 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할 -> 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

- 자바스크립트와 같은 스크립팅 언어로 DOM을 수정할 수 있음

 

 

 RN vs React

- RN에서 라이프 사이클은 웹에서의 렌더링과 같지만 렌더링 절차는 조금 다르다. 브릿지에 의존하기 때문.

- 브릿지는 JS코드를 통해 네이티브 계층과 통신하는 역할을 한다. JS스레드(=JS코드가 실행되는 장소)정보를 받아 네이티브에 전달한다. 네이티브를 담당하는 Main 스레드가 있고 백그라운드 스레드인 Shadow스레드가 있으며 Native 모듈이 있는데 각 모듈에 자체 스레드가 있다.

- 가장 큰 차이점은 대상 플랫폼 API를 대하는 방식이다. 아무래도 웹과 앱의 차이가 있다보니..

 

 

문법 차이

React	React-Native
<div>	<View>
<span>	<Text>
<li>,<ul>	<FlastList>,자식 아이템
<img>	<Image>

- React는 HTML문법을 사용하지만 RN은 이를 사용하지 않는다. 대신 플랫폼에 종속적인 리액트 컴포넌트를 사용한다.

- RN은 기존의 CSS를 지원하지 않으므로 flexbox를 이용한 레이아웃 제작을 해야한다.

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

- 화면 출력에 있어서 React는 ReactDom을 사용하지만 RN은 AppRegistry를 사용한다.

 

 

 

JSX사용하기

- RN도 React와 동일하게 JSX(JavaScript XML)를 이용하여 뷰를 만든다. RN의 모든 .js 파일은 모두 JSX파일이다.

//without JSX

class Hello extens React.Component{
	render(){
    	return React.createElement(
		"div",
        null,
        "Hello",
        this.props.name
        );
    }
}

ReactDOM.render(
	React.createElement(Hello, {name:"Bonnie"}),mountNode);

//with JSX

class Hello extends Component{
	render(){
    //createElement를 호출하는 대신 마크업을 리턴한다.
    return <div>Hello {this.props.name}</div>;
    }
}

	//더이상 createElement를 여기서 호출할 필요가 없다.
    ReactDOM.render(<Hello name="Bonnie"/>,mountNode);

 

.

.

.

앞의 두 코드는 모두 다음 HTML과 같은 페이지에 렌더링 한다.

<div>Hello Bonnie</div>