React Native란?

공식 정의

• React 와 JavaScript를 사용해서
• iOS/Android 네이티브 앱을 만드는
• 오픈소스 프레임워크임.

누가, 왜 만들었나? (등장 배경)

• 플랫폼별 종속성
  • iOS 앱 → Swift/Objective-C로 개발해야 함
  • Android 앱 → Kotlin/Java로 개발해야 함
• 같은 앱을 두 번 만들어야 함
• 코드 수정할 때마다 전체를 다시 컴파일해야 해서 느림
• iOS 팀, Android 팀이 따로 일하면서 유지 보수 비용이 두 배!

네이티브 UI란 뭘까?

View: 모바일 UI의 기본 단위

• 화면에 보이는 작은 직사각형 요소
• 텍스트, 이미지, 버튼 등 모든 UI 요소가 View임
• View 안에 다른 View가 들어갈 수 있음(중첩 가능)

• 전체 화면 = 하나의 큰 View
• 각 메시지 말풍선 = 작은 View
• 말풍선 안의 텍스트 = 텍스트를 표시하는 View
• 프로필 사진 = 이미지를 표시하는 View

네이티브 UI = 각 플랫폼이 직접 그리는 UI

• Android 앱의 버튼 → Android OS 가 직접 그림
• iOS 앱의 버튼 → iOS가 직접 그림
• Web 의 버튼 → 브라우저가 DOM을 통해 그림

웹뷰 앱 vs 네이티브 앱

1. 웹뷰(WebView) 앱

• 앱 안에 브라우저를 띄워서 웹 페이지를 보여주는 방식
• 장점: 웹 개발 지식만으로 앱 제작 가능
• 단점: 성능이 느리고 네이티브 앱처럼 느껴지지 않음

2. 네이티브 앱

• 플랫폼의 네이티브 UI 요소를 직접 사용
• 장점: OS가 직접 관리하기 때문에 빠르고 부드러움
• 단점: iOS/Android 각각 따로 개발해야함

React Native의 선택: 네이티브 UI

• 웹 페이지를 띄우는 게 아님!
• 진짜 Android/iOS 네이티브 UI를 사용!
• 그래서 일반 앱과 똑같이 보이고, 느껴지고, 동작함

React Native의 핵심 아이디어

JavaScript → 네이티브 UI 변환

JavaScript로 코드를 작성하면
(JavaScript로 로직 및 UI 선언)
    ↓
React Native가 네이티브 UI로 변환해준다
(JS 객체 설계도를 각 OS가 이해하는 명령으로 번역)
    ↓
결과: 진짜 네이티브 앱!
(iOS/Android가 진짜 자기 UI 요소를 그림)

• JavaScript + React로 한 번만 작성하도록
• iOS와 Android 둘 다 네이티브 앱으로 동작하도록

모든 것은 View다!

왜 전용 컴포넌트를 써야하나?

1. <View>에 글자를 바로 쓸 수 없음.
   • 웹에서는 <div>안녕</div> 이렇게 바로 쓸 수 있지만,
   • React Native에서는 반드시 <View><Text>안녕</Text></View> 이렇게 <Text>로 감싸야 함
   • 이유: 네이티브에서 텍스트는 별도의 전용 뷰(TextView, UITextView)로 처리되기 때문
2. 이미지도 독립적인 View
   • 웹의 <img>는 다른 요소 안에 넣는 인라인 요소처럼 느껴짐
   • 반면, React Native의 <Image>는 그 자체가 하나의 독립적인 네이티브 뷰(상자)로 화면에 그려짐

React와 React Native의 관계

전제 조건

• JavaScript 기본기가 필요
• React 기본 개념(컴포넌트, props, state, hooks)를 알아야 함

공통점: React 지식 활용

// React (웹)
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount

• 컴포넌트 구조(함수형 컴포넌트, JSX 문법)
• props / state 개념
• Hooks(useState, useEffect 등)
• 상태관리 라이브러리 (Zustand, Redux 등)
• 비즈니스 로직

차이점: 렌더링 대상

• React는 브라우저의 DOM에 그림
• React Native는 iOS/Android의 네이티브 UI에 그림

Core Components

용어 정리

• 플랫폼(Android/iOS)의 네이티브 UI를 JavaScript에서 다룰 수 있도록 연결한 컴포넌트
• React Native 컴포넌트가 실행 시점에 네이티브 뷰로 변환됨

• React Native가 기본으로 제공하는 Native Components 세트
• View, Text, Image, ScrollView, TextInput 등이 포함됨

Native Components가 하는 일

• 원래 네이티브 UI를 만들려면 Kotlin(Android)이나 Swift(iOS)를 써야 함
• React Native에서는 JavaScript로 React 컴포넌트를 작성
• 앱이 실행될 때, React Native가 네이티브 뷰로 변환해줌

Core Components 목록

공식 문서의 표를 참고함 — Core Components and Native Components

변환 과정

<View>
  → Android에서는 android.view.ViewGroup으로 변환
  → iOS에서는 UIView로 변환

<Text>
  → Android에서는 TextView로 변환
  → iOS에서는 UITextView로 변환

스타일링: CSS 대신 JavaScript 객체

공식 스타일링: StyleSheet API

• 모든 Core Component는 style prop을 받음
• CSS와 비슷하지만 camelCase를 사용함 (background-color → backgroundColor)
• 컴포넌트가 복잡해지면 StyleSheet.create로 스타일을 한 곳에 모아서 정의하는 게 좋음

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

function App() {
  return (
    <View style={styles.container}>

CSS와의 차이점

웹에서 쓰던 스타일링 도구들은?(emotion, Tailwind 등)

1. CSS-in-JS: @emotion/native

import styled from '@emotion/native';

const Container = styled.View`
  display: flex;
  justify-content: center;
  align-items: center;

• styled.View, styled.Text 형태로 RN 컴포넌트를 감싸서 사용
• 템플릿 리터럴(`) 또는 객체 문법 모두 사용 가능
• 테마 지원도 됨 (@emotion/react의 ThemeProvider 사용)

2. Tailwind 방식: NativeWind

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

function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500"

• 웹에서 쓰던 Tailwind 클래스를 그대로 사용
• 빌드할 때 Tailwind 클래스가 StyleSheet.create 객체로 변환됨
• 웹과 네이티브에서 같은 className으로 스타일링이 가능

스타일링 방식 비교

정리

• React Native 공식 스타일 시스템은 StyleSheet (JS 객체 기반)
• emotion, Tailwind 등은 호환 레이어를 제공하는 별도 라이브러리
• CSS를 그대로 쓰는 게 아니라, RN 스타일 API 위에 추상화를 얹는 방식

동작 원리: 렌더링

기본 개념

• 우리가 작성하는 React 코드가 실행되는 곳
• 컴포넌트, 상태, 이벤트 핸들러 등

• 실제 화면에 UI를 그리는 곳
• 카메라, GPS, 파일 시스템 등 네이티브 기능

렌더링: 3단계

1. Render (렌더 단계)

이 단계에서 일어나는 일

1. React 컴포넌트가 실행된다
2. React Element Tree가 생성된다 (JavaScript 객체)
3. React Shadow Tree가 생성된다 (C++ 객체)

예시로 이해하기

function MyComponent() {
  return (
    <View>
      <Text>Hello, World</Text>
    </View>
  );
}

// 실제로는 이런 구조의 JavaScript 객체가 만들어진다
{
  type: 'View',
  props: {
    children: {
      type: 'Text',
      props: {
        children: 'Hello, World'
      }

• 순수한 JavaScript 객체
• 화면에 무엇이 나타나야 하는지 설명
• 아직 실제 UI가 아님. 그냥 설계도

React Element Tree (JS)    →    React Shadow Tree (C++)
      <View>                        ViewShadowNode
        └── <Text>                    └── TextShadowNode
              └── "Hello"                   └── (text content)

• C++로 작성된 객체
• JavaScript에서 넘어온 props 정보를 담고 있음
• 레이아웃 정보 (위치, 크기)를 저장할 공간이 있음

• JavaScript는 느림. 레이아웃 계산 같은 무거운 작업을 JS에서 하면 앱이 버벅임
• C++는 빠름. Shadow Tree를 C++로 만들어서 빠른 레이아웃 계산이 가능
• 레이아웃 계산 같은 무거운 작업을 C++에서 처리함

2. Commit (커밋 단계)

이 단계에서 일어나는 일

1. 레이아웃 계산 (Yoga 엔진 사용)
2. 트리 확정 (이 트리를 “다음에 그릴 Tree”로 지정)

레이아웃 계산이란?

<View style={{ flex: 1, padding: 20 }}>
  <Text style={{ fontSize: 24 }}>Hello</Text>
</

1. 화면 크기 확인 (예: iPhone 15 = 393 x 852)
2. <View>는 flex: 1이니까 화면 전체 차지
3. <View> 안쪽에 20px 패딩
4. <Text>는 "Hello" 텍스트 크기만큼 공간 필요

ViewShadowNode:
  x: 0, y: 0
  width: 375, height: 812   (예: iPhone 화면 크기)

TextShadowNode:
  x: 20, y: 20              (패딩 때문에 20px 안쪽)
  width: 80, height: 29     (텍스트 크기에 맞춰 계산됨)

Yoga 레이아웃 엔진이란?

• Facebook이 만든 크로스 플랫폼 레이아웃 엔진
• Flexbox 레이아웃을 계산
• C++로 작성되어 빠름
• iOS, Android, Web 모두에서 동일한 결과를 냄

트리 확정

3. Mount (마운트 단계)

이 단계에서 일어나는 일

1. Tree Diffing: 이전에 그린 트리와 새 트리를 비교
2. 변경 사항 계산: 어떤 뷰를 추가/수정/삭제할지 결정
3. 네이티브 UI 생성/업데이트: 실제 화면에 반영

Tree Diffing이란?

// 상태 변경 전
<View>
  <View style={{ backgroundColor: 'red' }} />
  <View style={{ backgroundColor: 'blue' }} />

• 뭐가 바뀌었는지 알아냄
• 바뀐 부분만 업데이트

네이티브 UI 생성

React Shadow Tree          →          Host View Tree
                                      (네이티브 UI)

ViewShadowNode            →          Android: ViewGroup
                                      iOS: UIView

TextShadowNode            →          Android: TextView
                                      iOS: UITextView

New Architecture (0.76+)

먼저, 왜 새로운 아키텍처가 필요했을까?

기존 아키텍처: Bridge 방식

1. 비동기 통신만 가능

   사용자: 버튼 클릭!
     ↓
   JS: "버튼 눌렸어!" (메시지 보냄)
     ↓ (기다림...)
   Native: (메시지 받음) → UI 업데이트
     ↓ (기다림...)
   

New Architecture의 해결책

핵심 변화: JSI (JavaScript Interface)

1. 직접 참조: JSON 변환 없이 메모리를 직접 공유
2. 동기 호출 가능: 필요하면 즉시 응답을 받을 수 있음
3. 더 빠름: 변환 과정이 없어서 오버헤드가 줄었음

New Architecture의 세 가지 핵심

• Bridge 대신 직접 통신
• JSON 변환 없이 메모리 참조
• 동기/비동기 모두 지원

• 새로운 렌더링 시스템
• 동기 렌더링 지원 → 더 빠른 UI 반응
• 사용자 인터랙션에 더 빠르게 반응할 수 있음

• 네이티브 모듈을 필요할 때만 로딩 (지연 로딩)
• 앱 시작할 때 모든 모듈을 미리 로딩하지 않음 → 앱 시작 시간 단축

결과

• 스크롤이 더 부드럽다
• 애니메이션이 더 자연스럽다
• 앱이 더 빨리 시작된다
• 앱이 더 네이티브답게 반응한다

개발 환경: Expo vs React Native CLI

1. Expo

• React Native 위에 올라가는 프레임워크
• 개발에 필요한 도구들을 미리 세팅해서 제공
• Xcode/Android Studio 없이도 시작 가능
• 자주 쓰는 네이티브 기능 (카메라, 푸시 알림 등) 기본 제공

# Expo로 시작하기
npx create-expo-app@latest my-app
cd my-app
npx expo start

2. React Native CLI

• React Native 기본 도구
• 네이티브 프로젝트(Xcode/Android Studio)를 직접 관리
• 더 많은 자유도, 더 많은 책임

# React Native CLI로 시작하기 (더 복잡한 설정 필요)
npx @react-native-community/cli init MyApp
cd MyApp
npx react-native run-ios  # 또는 run-android

비교

공식 문서의 권장 사항

1. 시간 절약: 환경 설정에 시간 쓰지 않고 바로 개발 시작
2. 검증된 도구: 커뮤니티가 수년간 다듬어온 best practice
3. 점진적 확장: Expo로 시작해서, 필요하면 네이티브 코드 추가 가능

우리 실습에서는?

• 설정이 간단해서 스터디에서 바로 실습 가능
• 공식 문서도 Expo로 시작하는 것을 권장
• 나중에 필요하면 expo eject로 CLI 방식으로 전환 가능

실습: React Native 변환 확인

목표

• 웹에서 실행할 때: <View> → <div>로 변환되는 것 확인
• React Native Devtools에서: <View>, <Text> 구조 확인
• Xcode에서: 실제 네이티브 뷰 (RCTView, RCTText 등) 확인

Step 1) 프로젝트 생성 및 실행

# 1. 프로젝트 생성
npx create-expo-app@latest counter-app
cd counter-app

# 2. 개발 서버 시작
npx expo start

# 3. 먼저 기본 코드를 제거하는 스크립트
# app 디렉토리와 다른 디렉토리(components, constants, hooks-기본 코드 포함)에 있던 기존 파일들은 스크립트에 의해 app-example 디렉토리로 이동
npm run reset-project

Step 2) 카운터 앱 코드 작성

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

export default function App() 

{
  "extends": "expo/tsconfig.base.json",
  "compilerOptions": {

Step 3) 웹에서 확인하기 - <View> → <div> 변환

1. 브라우저에서 F12 (또는 Cmd+Option+I)를 눌러 개발자 도구 열기
2. Elements 탭에서 HTML 구조 확인

확인 캡쳐

<!-- React Native 코드 -->
<View style={styles.container}>
  <Text style={styles.title}>카운터</Text>
</View>

<!-- 웹에서 변환된 결과 -->

🔍 왜 이렇게 변환될까?

// 우리가 작성한 코드
import { View } from 'react-native';

// 웹에서 실제로 실행되는 코드 (Expo가 자동으로 바꿔줌)
import { View } from 'react-native-web';

// react-native-web 라이브러리 내부 (단순화)
function View(props) {
  return <div style={변환된스타일} {...props} />;
}

// React Native 스타일
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  }
});

<div class="r-flex-1 r-backgroundColor-f0f0f0" />

.r-flex-1 { flex: 1; }
.r-backgroundColor-f0f0f0 { background-color: #f0f0f0; }

Step 4) React Native Devtools에서 확인하기 - React Native 컴포넌트 구조

1. 앱이 실행되면 기기를 흔들기
2. 개발자 메뉴가 나타나면 "open JS Debugger" 선택
3. 해당 요소의 정보가 표시 확인

• React Native의 컴포넌트 트리 구조를 확인 가능
• View, Text, Pressable 등의 컴포넌트 이름이 그대로 보임
• 각 컴포넌트에 적용된 스타일과 props 확인 가능

🔍 왜 이렇게 보이나?

<View>  ←  DevTools에서 보이는 것
   ↓
RCTViewComponentView  ←  실제 iOS에서 렌더링되는 것

Step 5) Xcode에서 확인하기 - 실제 네이티브 뷰

# 1. expo-dev-client 설치
npx expo install expo-dev-client

# 2. iOS 빌드 생성 (Xcode 필요)
npx expo run:ios

• ios/ 폴더가 생성됨
• Xcode 프로젝트 파일 (.xcworkspace)이 생성됨
• 앱이 시뮬레이터에서 실행됨

1. Xcode에서 프로젝트 열기

1. 앱 실행
   • Xcode에서 ▶ (Run) 버튼을 눌러 앱 실행
2. Debug View Hierarchy 열기
   • 앱이 실행된 상태에서
   • Xcode 메뉴: Debug → View Debugging → Capture View Hierarchy
   • 또는 하단 디버그 바에서 View Hierarchy 아이콘 클릭
3. 계층 구조 확인

🔍 왜 이렇게 변환될까?

UIView (iOS 기본 클래스)
   ↑ 상속
RCTViewComponentView (React Native 클래스)

• UIView: iOS가 제공하는 기본 뷰 클래스. 모든 iOS UI의 기반.
• RCTViewComponentView: React Native가 만든 클래스. UIView를 상속받아서 만듦.

• iOS의 모든 기본 기능(터치 이벤트, 애니메이션 등)을 그대로 사용 가능
• React Native가 필요한 기능(props 업데이트, JavaScript와 통신)을 추가

1. RCT 접두사의 의미

• React Native 초기부터 사용된 내부 명명 규칙으로 "React" 관련 네이티브 클래스임을 나타냄
• RCTView는 UIView를 상속받은 React Native의 커스텀 뷰 클래스
• RCTText는 텍스트 렌더링을 위한 React Native의 커스텀 뷰 클래스

  New Architecture (Fabric)에서의 변화

  React Native 0.76+ (New Architecture)에서는 컴포넌트 이름이 조금 다름:

  • RCTView → RCTViewComponentView
  • RCTText → RCTTextComponentView

  ComponentView 접미사가 붙은 클래스들은 Fabric 렌더러에서 사용되는 새로운 네이티브 뷰 구현!

• iOS 운영체제가 관리하는 뷰만 보여줌
• JavaScript나 React와 전혀 관계없이 동작
• 순수 iOS 앱 개발할 때 쓰는 것과 똑같은 도구

• iOS 운영체제가 이 뷰를 네이티브 뷰로 인식하고 있다는 뜻
• 웹뷰 안에서 HTML을 보여주는 게 아니라, 진짜 네이티브 뷰라는 증거

정리

1. 웹: React Native 컴포넌트가 HTML DOM 요소로 변환됨
2. iOS: React Native 컴포넌트가 UIView 기반의 네이티브 뷰로 변환됨
3. 같은 JavaScript 코드가 플랫폼에 따라 다른 네이티브 요소로 렌더링됨
4. 이것이 React Native가 네이티브 앱을 만들 수 있는 이유!! -끝