Javascript 언어로 iOS, Android 앱을 만들수 있다면 React Native를 사용하면 만들수가 있습니다. React Native는 흔히 말하는 언어(language)가 아니라, 스마트폰 앱을 만들수 있는 프레임워크입니다. React Native에서 실제로 사용하는 **프로그래밍 언어는 JavaScript (또는 TypeScript)**입니다.즉, Java나 Dart처럼 고유의 문법 구조를 가진 언어가 아니라, JavaScript 문법을 기반으로 모바일 앱 UI를 만드는 도구입니다.

React Native란? | React Native는 프레임워크

✅ React Native는 “프레임워크”입니다

항목	설명
사용 언어	JavaScript (또는 TypeScript 선택 가능)
핵심 기술	React 기반의 컴포넌트 시스템
목적	iOS + Android 앱을 동시에 개발
동작 방식	JS → Native Bridge를 통해 네이티브 뷰 렌더링
사용 도구	Expo, React Native CLI, Metro, Babel 등

✅ React Native vs Flutter vs Android 구조와 언어 비교

비교 항목	React Native (JSX + JS)	Dart (Flutter)	Java (Android)
언어	JavaScript	Dart	Java
클래스 기반?	함수형 기반 (with Hooks)	클래스 기반 위주	클래스 기반 위주
컴포넌트 구성	function App() { return <View> }	class MyApp extends StatelessWidget	public class MainActivity extends AppCompatActivity
레이아웃 구성	<View>, <Text>	Row, Column, Container	XML 파일 별도
상태 관리	useState, useEffect	setState, Provider 등	LiveData, ViewModel 등

React Native는 HTML처럼 생긴 JSX + JavaScript 함수형 코드를 함께 씁니다.

✅ 예시 비교

🟢 React Native (JavaScript + JSX)

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

export default function App() {
  return (
    <View>
      <Text>Hello React Native!</Text>
    </View>
  );
}

🟠 Flutter (Dart)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('Hello Flutter!'),
    );
  }
}

🧠 요약

React Native는 독자적인 언어가 아닙니다.
JavaScript (혹은 TypeScript) 문법을 기반으로 사용합니다.
따라서 Java, Dart처럼 언어 중심의 문법 구조는 없고, 대신 컴포넌트와 훅 중심의 구조를 가지고 있습니다.

본격적으로 React Native를 소개해보겠습니다. 같이 React Native 공부를 시작 해봅시다.

📱 React Native란?

React Native는 JavaScript를 사용해 iOS와 Android 앱을 동시에 개발할 수 있는 프레임워크입니다.

웹 개발에 사용되는 **React(리액트)**의 개념을 기반으로 만들어졌습니다.

✅ React Native의 핵심 개념

항목	설명
📦 개발 언어	JavaScript (또는 TypeScript)
🧱 개발 구조	React 기반의 컴포넌트(Component) 구조
📱 타깃 플랫폼	iOS + Android 동시 개발 (Cross-platform)
🔄 렌더링 방식	JavaScript → Native 브릿지 → 네이티브 뷰 렌더링
🚀 주요 도구	Expo CLI, React Native CLI, VS Code, Metro bundler

🧩 React vs React Native

구분	React (웹)	React Native
출력 결과	브라우저 HTML 화면	스마트폰 앱 UI (iOS/Android)
UI 구성 요소	<div>, <button> 등 HTML	<View>, <Text>, <Button> 등 Native 컴포넌트
스타일링	CSS	JavaScript 기반 StyleSheet
네비게이션	React Router	React Navigation

🧠 React Native 작동 원리

개발자는 JavaScript + JSX로 앱 UI 작성
JS 코드는 내부적으로 **Bridge(브릿지)**를 통해 네이티브 코드(Android/iOS)에 전달됨
실제 앱 화면은 Native UI 요소로 렌더링됨 (WebView 아님!)
사용자는 진짜 네이티브 앱처럼 부드러운 경험을 얻게 됨

💡 React Native의 주요 특징

특징	설명
✍️ 하나의 코드로 두 플랫폼	한 번 작성한 코드로 Android & iOS 앱을 모두 제작 가능
🧩 컴포넌트 기반	작은 컴포넌트를 조립하듯 앱을 구성
🔁 빠른 핫리로드	수정 시 앱을 재시작하지 않고도 바로 반영됨
🎨 네이티브 UI	WebView가 아닌 실제 네이티브 UI로 렌더링
🚀 Expo 지원	빠른 개발과 실기기 테스트를 쉽게 도와주는 도구 제공

👍 React Native의 장점

✅ 개발 속도 빠름 – 두 플랫폼을 한 번에 개발 가능
✅ 재사용성 높음 – 컴포넌트, 로직, 스타일 재활용 용이
✅ 풍부한 커뮤니티와 오픈소스 – 다양한 라이브러리 존재
✅ 초보자 친화적 – 웹 개발자라면 진입 장벽 낮음

👎 React Native의 단점

❗ 일부 네이티브 기능은 직접 구현 필요 (예: 블루투스, 카메라 고급 기능)
❗ 버전 충돌 이슈, 라이브러리 의존성 문제 종종 발생
❗ 앱 크기 커질 수 있음 (특히 Expo 사용 시)
❗ 고성능/게임 앱에는 적합하지 않을 수 있음

✨ React Native로 만들 수 있는 앱

유형	예시
✅ 정보성 앱	뉴스, 메모, 일정 앱
✅ 쇼핑 앱	이커머스, 마켓 앱
✅ SNS 앱	채팅, 피드, 사진 공유 앱
✅ 교육 앱	퀴즈, 학습, 어린이 앱
✅ 라이프스타일 앱	날씨, 운동 기록, 가계부 등

🔧 React Native 개발을 위한 준비물

도구	설명
Node.js	자바스크립트 런타임
Expo CLI	빠른 앱 생성 및 실행 도구
Android Studio / Xcode	에뮬레이터 실행, 실제 디바이스 테스트
VS Code	코드 편집기
Expo Go (모바일 앱)	실시간 실기기 테스트 가능 앱

🎓 React Native 학습 순서 예시

JavaScript 기본 문법
React 기본 구조 (컴포넌트, JSX, Hooks)
React Native 구조와 StyleSheet
화면 구성 및 이벤트 처리
React Navigation으로 화면 이동
AsyncStorage로 데이터 저장
API fetch로 외부 데이터 연동
앱 배포 (Expo, apk 빌드 등)

🧭 결론

React Native는 웹 개발자도 진입하기 쉬운 크로스 플랫폼 모바일 앱 개발 도구입니다.

빠르게 앱을 만들고 실시간으로 테스트할 수 있으며, 스타트업, 교육, MVP 앱 제작에 특히 적합합니다.

Peter Coding IT World

React Native란? | React Native는 프레임워크 입니다 | React Native iOS 앱, Android 앱을 Javascript로 개발 할수 있는 프레임워크