[React Native] React Native 시작하기

React Native

React Native는 페이스북이 개발한 오픈소스 모바일 웹 프레임워크이다. 하나의 코드로 iOS와 Android 앱을 동시에 개발할 수 있도록 해준다. React와 동일한 문법을 사용하며 실제 네이티브 컴포넌트와 연결되어 작동하기에 성능도 우수하다.

특징

특징	설명
React 기반	기존 React 지식을 그대로 활용 가능
크로스 플랫폼	Android와 iOS를 하나의 코드로 개발
핫 리로딩	코드 수정 시 앱 재시작 없이 즉시 반영
네이티브 연동 가능	Java, Swift 등과 연동해 고급 기능 구현 가능
커뮤니티 및 라이브러리 풍부	Expo, React Navigation, Redux 등 지원

Bridge 아키텍처

React Native는 JavaScript 코드를 해석해 Bridge를 통해 Android, iOS 네이티브 컴포넌트로 전달한다. Bridge를 통해 Javascript에서 작성한 로직이 네이티브 컴포넌트와 상호작용할 수 있다.

JS Code (React Native)
    ↓
Bridge
    ↓
Native Modules (Android/iOS)

React vs React Native

항목	React (웹)	React Native (모바일)
렌더링 대상	브라우저 DOM	iOS/Android 네이티브 UI
스타일링	CSS, Sass 등	Flexbox, StyleSheet
컴포넌트	<div>, <input> 등	<View>, <Text> 등
하드웨어 접근	제한적	네이티브 API 직접 접근 가능
라이브러리	React DOM, React Router 등	React Native, Expo 등

주요 컴포넌트 및 스타일링

• View : 웹의 <div>와 유사한 컨테이너 역할
• Text : 텍스트 표시를 위한 컴포넌트
• Image : 이미지 렌더링
• StyleSheet : 스타일 정의

스타일링은 JavaScript 객체 형태로 작성하며 Flexbox를 활용해 레이아웃을 구성한다.

React Native 설치 (Expo)

npm install -g expo-cli
expo init my-app
cd my-app
npm start

QR 코드를 통해 iOS/Android 기기에서 바로 실행 가능하며, 스토어에서 Expo Go라는 앱을 깔아야한다.
이때, npm start -web 명령어로 웹을 통해서도 실행 가능하다.

코드 흐름

1. 앱 실행

// index.js (또는 index.android.js, index.ios.js)
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('앱이름', () => App);

• AppRegistry : React Native 앱의 진입점으로 네이티브와 연결되는 지점이다.
• 실제로 렌더링할 컴포넌트를 등록한다.

2. 컴포넌트 렌더링 (App.js)

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello React Native</Text>
    </View>
  );
}

3. JS Thread ↔ Native Bridge 통신

• React Native는 JavaScript 코드와 네이티브 코드 사이에 Bridge가 존재한다.
• JS 코드에서 네이티브 기능(카메라, 위치, 알림 등)을 사용할 경우,
• JS → Native: 명령 전달
• Native → JS: 결과 리턴 (비동기 Promise 기반)

[JavaScript Realm]
  |
  |  setState(), fetch(), 이벤트 등
  v
[Bridge]
  |
  |  Native Module 호출
  v
[Native Realm (Android/iOS)]

4. 상태 변화 → Virtual DOM → Diff → 실제 UI 업데이트

• 웹 React처럼 Virtual DOM을 비교하고 최적화된 변경만 네이티브에 적용한다.
• useState, useEffect 등으로 상태를 변경한다.
• 이후 변경된 부분만 다시 렌더링한다.

5. 네이티브 컴포넌트 렌더링

• 최종적으로 React Native는 View, Text, Image 등 JS 컴포넌트를 플랫폼 별 네이티브 UI로 변환한다.
• Android → XML 기반 View
• iOS → UIKit 기반 View