react와 react-dom과 react-native

📌 react

• react는 라이브러리다.
• react 컴포넌트를 정의하고 관리하는 데 사용된다.
• react는 react 컴포넌트 클래스 및 함수, JSX 지원, 가상 DOM (Virtual DOM), 라이프사이클 메서드, 상태 관리 등의 기능들을 제공한다.

import React from 'react';

class MyComponent extends React.Component {
  // 컴포넌트 로직 및 렌더링 메서드
}

 

📌 react-dom

• 웹 애플리케이션 또는 웹 앱을 개발할 때 사용되는 React의 확장
• react-dom은 react로 만들어진 로직들과 기능들을 실제 브라우저에 렌더링해준다.
  (즉, react는 가상 DOM을 사용하여 메모리에 렌더링된 컴포넌트 트리를 관리하고, 이를 실제 DOM에 반영하는 역할은 react-dom이 수행한다.)
• react-dom을 이용해 가상 DOM을 실제 DOM으로 렌더링하고, 이벤트 핸들링, 상태 관리, 컴포넌트 라이프사이클 관리 등과 같은 웹 애플리케이션을 개발하는 데 필요한 여러 기능을 활용할 수 있다.

// AppWeb.js
import React from 'react';
import MyComponent from './MyComponent';

const AppWeb = () => (
	<div>
		<h1>Web App</h1>
		<MyComponent />
	</div>
);

export default AppWeb;

// index.js
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

// 실제 DOM에 MyComponent를 렌더링
ReactDOM.render(<MyComponent />, document.getElementById('root'));

 

📌 react-native(모바일 애플리케이션)

• 네이티브 환경에서 실행되는 애플리케이션을 구축하기 위해 사용되는 독립적인 라이브러리
• react-native 패키지를 사용하여 네이티브 컴포넌트로 렌더링한다.
• react-native를 이용해 만든 애플리케이션은 JavaScript 코드를 사용하여 iOS 및 Android 플랫폼에서 실행된다.
• react-native는 네이티브 UI 구성 요소를 사용하고, JavaScript 코드는 JavaScriptCore 엔진 또는 V8 엔진을 통해 실행된다.
• react-native에서는 DOM이나 HTML 엘리먼트가 아닌, 각 플랫폼에 특화된 네이티브 컴포넌트가 사용된다.
  ex) react-native에서 <View>는 iOS에서는 UIView, Android에서는 android.view.View와 같은 네이티브 컴포넌트로 매핑된다.

// AppNative.js
import React from 'react';
import { View, Text } from 'react-native';
import MyComponent from './MyComponent';

const AppNative = () => (
	<View>
		<Text>Mobile App</Text>
		<MyComponent />
	</View>
);

export default AppNative;

// index.js
import { AppRegistry } from 'react-native';
import AppNative from './AppNative'; // React Native 앱의 진입점 컴포넌트
import { name as appName } from './app.json';

// 앱 등록
AppRegistry.registerComponent(appName, () => AppNative);

// 앱 시작
AppRegistry.runApplication(appName, {
	rootTag: document.getElementById('root'), // 웹에서는 필요
});