Notice
Recent Posts
- Today
- Total
빵 입니다.
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'), // 웹에서는 필요
});
'프론트엔드 > React' 카테고리의 다른 글
Portal (0) | 2023.12.06 |
---|---|
CSS 스타일 설정 방법 (0) | 2023.12.06 |
조건부 렌더링 (0) | 2023.12.05 |
배열 데이터를 렌더링할 때 key를 꼭 써야할까? (0) | 2023.12.05 |
상태가 없는 컴포넌트(Stateless)와 상태가 있는 컴포넌트(Statefull) (0) | 2023.12.05 |
Comments