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

Korea Generation
Korea Generation
대한민국 서울특별시

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


React Native란? | React Native는 프레임워크
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 작동 원리

  1. 개발자는 JavaScript + JSX로 앱 UI 작성

  2. JS 코드는 내부적으로 **Bridge(브릿지)**를 통해 네이티브 코드(Android/iOS)에 전달됨

  3. 실제 앱 화면은 Native UI 요소로 렌더링됨 (WebView 아님!)

  4. 사용자는 진짜 네이티브 앱처럼 부드러운 경험을 얻게 됨



💡 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 학습 순서 예시

  1. JavaScript 기본 문법

  2. React 기본 구조 (컴포넌트, JSX, Hooks)

  3. React Native 구조와 StyleSheet

  4. 화면 구성 및 이벤트 처리

  5. React Navigation으로 화면 이동

  6. AsyncStorage로 데이터 저장

  7. API fetch로 외부 데이터 연동

  8. 앱 배포 (Expo, apk 빌드 등)



🧭 결론


React Native는 웹 개발자도 진입하기 쉬운 크로스 플랫폼 모바일 앱 개발 도구입니다.
빠르게 앱을 만들고 실시간으로 테스트할 수 있으며, 스타트업, 교육, MVP 앱 제작에 특히 적합합니다.


Related Posts

로드 중…

댓글 쓰기