React.js vs React Native 쉽게 이해하기

---

✅ React.js란? (웹 개발)

React.js는 웹사이트(웹 애플리케이션)를 만들 때 사용하는 JavaScript 라이브러리입니다.

쉽게 말하면?

👉 웹사이트(네이버, 유튜브, 인스타그램 웹 버전 등)를 만들 때 사용
👉 HTML과 CSS를 사용해서 화면을 구성함
👉 ReactDOM을 이용해 브라우저에서 화면을 그림

예제 (React.js 코드)

import React from 'react';

function App() {
  return <h1>안녕하세요! React 웹사이트입니다 🚀</h1>;
}

export default App;

💡 결론: 웹 브라우저에서 실행되는 웹사이트를 만들고 싶다면 React.js 사용!

---

✅ React Native란? (모바일 앱 개발)

React Native는 모바일 앱(Android, iOS)을 만들 때 사용하는 프레임워크입니다.

쉽게 말하면?

👉 스마트폰 앱(카카오톡, 유튜브 모바일 앱 등)를 만들 때 사용
👉 웹이 아니라 모바일 앱 환경에서 동작
👉 HTML 대신 View, Text 같은 네이티브 컴포넌트를 사용
👉 ReactDOM 대신 AppRegistry를 사용해 앱 화면을 그림

예제 (React Native 코드)

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

function App() {
  return (
    <View>
      <Text>안녕하세요! React Native 모바일 앱입니다 📱</Text>
    </View>
  );
}

export default App;

💡 결론: 모바일(iOS, Android)에서 실행되는 앱을 만들고 싶다면 React Native 사용!

---

React.js vs React Native 비교

	React.js (웹)	React Native (모바일 앱)
사용 목적	웹사이트 개발	모바일 앱 개발
실행 환경	브라우저 (Chrome, Edge 등)	스마트폰 (iOS, Android)
UI 요소	div, span, h1 같은 HTML 태그 사용	View, Text, Button 같은 네이티브 컴포넌트 사용
스타일링	CSS 사용	StyleSheet를 사용해 스타일 적용
렌더링 엔진	ReactDOM.render() 사용	AppRegistry.registerComponent() 사용
배포 방식	웹 서버 (도메인 주소)	앱 스토어 (Google Play, App Store)

---

웹을 만들고 싶다면? → React.js

• 웹사이트, 쇼핑몰, 블로그, 관리자 페이지 개발
• 예: 네이버, 유튜브 웹사이트, 웹 서비스

모바일 앱을 만들고 싶다면? → React Native

• 안드로이드, iOS에서 실행되는 앱 개발
• 예: 인스타그램, 유튜브, 카카오톡 같은 모바일 앱

✅ 정리:

• 웹 개발 → React.js
• 모바일 앱 개발 → React Native

웹과 앱을 둘다 만들어야 한다면

• React -> React Native 순으로 개발을 하라고 하던데 나도 입문자이기에 뭐가 정답인지 모르겠다