// 이 파일이 하는 일: "React Native" 코스 — 웹에서 배운 React 지식이 어떻게
// 그대로 '진짜 앱'이 되는지를 다리 삼아, JS로 네이티브 UI를 그리는 원리에서
// 출발해 컴포넌트/태그 대응·StyleSheet·Expo·네이티브 한계·우리 팀 적합성까지
// 7개 섹션으로 안내하는 정적 학습 페이지.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.
// 목표 수준: "2개월에 네이티브 전문가"가 아니라 "지형을 읽고, 내 React 실력으로 앱까지 가는 길을 아는" 것.

import { Link } from 'react-router-dom';

// ── 예제 코드 상수들 ──

const CODE_WHAT = `React Native 한 줄 요약:

    자바스크립트(React)로 짠 화면 = 진짜 '네이티브' 앱 UI

흔한 오해 (❌):                     실제 (✅):
──────────────────────         ──────────────────────
"웹사이트를 앱 껍데기로            JS 코드가 iOS의 진짜 버튼,
 감싼 거 아냐?"                    안드로이드의 진짜 목록으로
 = WebView(앱 속 브라우저)         '변신'해서 그려짐
                                  = 진짜 네이티브 위젯

비유: 설계도(JS) 한 장을 넘기면, 두 나라 건축팀(iOS·Android)이
각자 '자기 나라 자재'로 진짜 건물을 짓는다. 사진을 붙인 가짜 벽이
아니라, 그 나라의 진짜 벽돌로 쌓은 진짜 건물.

만든 곳: Meta(옛 Facebook), 2015년 공개. Instagram·Discord·
Shopify 등 우리가 매일 쓰는 앱들도 상당 부분 RN으로 만들어졌어요.`;

const CODE_SAME_REACT = `// 웹에서 배운 그대로 — useState도, props도, JSX도 똑같아요
import { useState } from 'react';
import { View, Text, Pressable } from 'react-native';   // ← import 출처만 다름

function LikeButton({ label }) {          // props: 웹 React와 100% 동일
  const [count, setCount] = useState(0);  // useState: 웹 React와 100% 동일

  return (                                // JSX: '태그 이름'만 바뀜
    <View>
      <Text>{label} {count}</Text>
      <Pressable onPress={() => setCount(count + 1)}>
        <Text>누르기</Text>
      </Pressable>
    </View>
  );
}

// 웹 React와 '개념'이 다른 곳을 찾아보세요 — 하나도 없습니다.
// onClick → onPress, <div> → <View>, <span> → <Text> ...
// 바뀐 건 '단어(태그 이름)'일 뿐, '문법(React)'은 그대로예요.`;

const CODE_TAGS = `웹(HTML/React)          React Native        진짜로 바뀌는 것(네이티브)
─────────────────      ───────────────     ─────────────────────────
<div>                  <View>              UIView / ViewGroup
<span> <p> 글자        <Text>              UILabel / TextView
<img>                  <Image>             UIImageView / ImageView
<input>                <TextInput>         UITextField / EditText
<button>               <Pressable>         네이티브 터치 처리
<ul> <li> 긴 목록      <FlatList>          UITableView / RecyclerView
onClick=               onPress=
className="card"       style={styles.card}

⚠ 철칙 하나: RN에서 '모든 글자'는 반드시 <Text> 안에 있어야 한다.
   웹처럼   <View>안녕</View>            → 에러!
   RN에선   <View><Text>안녕</Text></View> → 정답`;

const CODE_STYLE = `import { StyleSheet, View, Text } from 'react-native';

function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>미림 스터디</Text>
    </View>
  );
}

// CSS 파일이 아니라 '자바스크립트 객체'로 스타일을 쓴다
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',  // background-color 아님 → camelCase
    padding: 16,                 // 16px 아님 → 숫자엔 단위가 없다
    borderRadius: 12,
    flexDirection: 'row',        // ⚠ RN 기본값은 'column'! (웹 CSS는 row)
  },
  title: { fontSize: 18, fontWeight: '600' },
});

// 같은 점: flex·padding·margin·borderRadius 등 이름과 개념 대부분 그대로.
// 다른 점: ① camelCase(backgroundColor)  ② 숫자에 단위 없음
//         ③ flex 방향 기본이 column  ④ 셀렉터·상속(캐스케이드) 없음`;

const CODE_EXPO = `# 1) 프로젝트 생성 (컴퓨터에 Node.js만 있으면 됨)
npx create-expo-app@latest MirimApp
cd MirimApp

# 2) 개발 서버 켜기
npx expo start

# 3) 폰에 'Expo Go' 앱을 설치하고, 터미널에 뜬 QR코드를
#    폰 카메라(또는 Expo Go 앱)로 스캔
#    → 몇 초 뒤, 방금 만든 앱이 '내 진짜 폰'에서 돌아간다!

# 시뮬레이터/에뮬레이터가 깔려 있다면 터미널에서 키만 눌러도 됨:
#   i = iOS 시뮬레이터   a = 안드로이드 에뮬레이터   w = 웹브라우저

# 코드를 저장하면 폰 화면이 즉시 갱신(Fast Refresh) — 웹의 HMR과 똑같은 감각.`;

const CODE_NATIVE = `JS만으로 안 될 때, 그리고 그때의 선택지

대부분의 기능(카메라·위치·알림·저장소...)은 이미 누군가
'네이티브 모듈'로 만들어 뒀어요. npm으로 설치해 JS처럼 씁니다:

  import * as Location from 'expo-location';   // 위치
  import { CameraView } from 'expo-camera';    // 카메라

정말 아무도 안 만든 특수 기능이라면? 그땐 얇게 진짜 네이티브 코드를:
  · 안드로이드 → Kotlin / Java
  · iOS       → Swift / Objective-C
짧게 작성해 JS와 연결(네이티브 모듈)합니다. 흔한 일은 아니에요.

RN의 그림 = 화면·로직은 JS로(대부분), '정말 필요한 얇은 층'만 네이티브.

한계도 정직하게:
  · 극한의 성능(고사양 게임·초저지연 그래픽)은 순수 네이티브가 유리
  · 스토어 출시는 결국 Xcode/Android 빌드가 필요(EAS Build로 클라우드 빌드 가능)
  · "2개월에 네이티브 전문가"는 과장 — 목표는 '지형을 읽는 눈'`;

const CODE_WHY_US = `우리 회사 스택으로 보는 'RN이 매력적인 이유'

우리 프론트 : React + JavaScript/TypeScript  ← RN과 같은 언어·같은 개념
우리 백엔드 : Spring Boot REST API (JSON)    ← 앱도 웹과 똑같이 fetch로 호출

웹 프론트가 서버를 부르던 그 코드, 앱에서도 '그대로':

  fetch('https://api.tdatalab.../courses')   // 웹이든 앱이든 동일
    .then((res) => res.json())
    .then((data) => setCourses(data));        // useState도 그대로

→ 서버(우리 Spring API)는 손 안 대고, 화면 코드의 '태그 이름'만 바꿔
  안드로이드 + iOS 앱 두 개가 나온다.
  = 이미 배운 React가 웹·안드로이드·iOS 세 곳에서 일하는 셈.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
// (React 입문 섹션 2에서 배운 내용을 이 파일이 스스로 실천하고 있어요.)
function Section({ n, title, sub, children }) {
  return (
    <section className="step-card" id={`sec-${n}`}>
      <div className="step-head">
        <span className="step-num">{n}</span>
        <div>
          <h3>{title}</h3>
          {sub && <span className="step-sub">{sub}</span>}
        </div>
      </div>
      <div className="step-body">{children}</div>
    </section>
  );
}

function Code({ children }) {
  return <pre className="code-block"><code>{children}</code></pre>;
}

const SECTIONS = [
  { n: 1, label: 'React Native란' },
  { n: 2, label: '지식이 그대로' },
  { n: 3, label: '태그 대응표' },
  { n: 4, label: 'StyleSheet' },
  { n: 5, label: 'Expo 시작' },
  { n: 6, label: '네이티브 한계' },
  { n: 7, label: '우리 팀 & RN' },
];

export default function ReactNativePage() {
  return (
    <div>
      {/* 히어로: 웹에서 배운 React가 어떻게 앱으로 이어지는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 앱 개발</div>
        <h1>React Native<br />— 내 React 지식이 그대로 앱이 되는 다리</h1>
        <p>
          "앱 개발은 완전히 다른 세계 아닌가요?" 절반만 맞아요. React Native는{' '}
          <strong>우리가 배운 React 그대로</strong> — 컴포넌트·props·state·JSX를 써서
          iOS·안드로이드에서 도는 <strong>진짜 네이티브 앱</strong>을 만듭니다. 이 코스는
          앱 전문가가 되는 지름길이 아니라, <strong>웹 개발자의 눈으로 앱의 지형을 읽고
          내 실력으로 거기까지 가는 길</strong>을 그려 봅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 60분</span>
          <span className="chip">실습: Expo 앱 1개 띄우기</span>
          <span className="chip">선수 지식: React 입문</span>
        </div>
      </div>

      {/* 섹션 바로가기 */}
      <nav className="pill-nav">
        {SECTIONS.map((s) => (
          <a key={s.n} href={`#sec-${s.n}`}>
            <b>{s.n}</b>
            {s.label}
          </a>
        ))}
      </nav>

      <Section n={1} title="React Native란" sub="자바스크립트로 '진짜' 네이티브 UI를 그린다">
        <p>
          React Native(줄여서 RN)는 <strong>자바스크립트(React)로 스마트폰 앱을 만드는
          프레임워크</strong>예요. 여기서 제일 중요한 오해 하나를 먼저 깨고 갑시다.
          RN은 웹사이트를 앱 아이콘으로 감싼{' '}
          <span className="icode">WebView</span>(앱 속에 든 작은 브라우저)가{' '}
          <strong>아닙니다</strong>. 우리가 쓴{' '}
          <span className="icode">&lt;Text&gt;</span> 한 줄은 iOS에선 진짜{' '}
          <span className="icode">UILabel</span>, 안드로이드에선 진짜{' '}
          <span className="icode">TextView</span>라는 <strong>그 OS의 순정 부품</strong>으로
          바뀌어 그려져요.
        </p>
        <Code>{CODE_WHAT}</Code>
        <p>
          그래서 스크롤 감·터치 반응·키보드가 각 폰의 네이티브 앱과 똑같이 자연스럽습니다.
          "웹을 흉내 낸 앱"이 아니라, <strong>JS라는 공용 설계도로 두 OS의 진짜 앱을
          동시에 짓는 것</strong> — 이게 RN의 핵심이에요.
        </p>
        <svg className="diagram" viewBox="0 0 640 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="자바스크립트로 작성한 React 컴포넌트 하나가 React Native를 거쳐 iOS의 진짜 네이티브 위젯(UIView·UILabel)과 안드로이드의 진짜 네이티브 위젯(ViewGroup·TextView) 두 가지로 각각 변환되는 구조. 웹뷰가 아니라 진짜 네이티브 UI라는 점을 보여 준다.">
          <rect x="215" y="20" width="210" height="46" rx="10" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="320" y="41" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">React 컴포넌트</text>
          <text x="320" y="58" textAnchor="middle" fontSize="12" fill="var(--muted)">JavaScript · JSX (우리가 쓰는 코드)</text>
          <line x1="320" y1="66" x2="320" y2="104" stroke="var(--line)" strokeWidth="2" />
          <path d="M320 112 L314 100 L326 100 Z" fill="var(--line)" />
          <rect x="245" y="112" width="150" height="42" rx="10" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="320" y="138" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">React Native</text>
          <line x1="320" y1="154" x2="170" y2="204" stroke="var(--line)" strokeWidth="2" />
          <path d="M170 210 L162 199 L176 197 Z" fill="var(--line)" />
          <line x1="320" y1="154" x2="470" y2="204" stroke="var(--line)" strokeWidth="2" />
          <path d="M470 210 L464 197 L478 199 Z" fill="var(--line)" />
          <rect x="55" y="210" width="230" height="48" rx="10" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="170" y="231" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">iOS</text>
          <text x="170" y="249" textAnchor="middle" fontSize="12" fill="var(--muted)">UIView · UILabel (진짜 위젯)</text>
          <rect x="355" y="210" width="230" height="48" rx="10" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="470" y="231" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">Android</text>
          <text x="470" y="249" textAnchor="middle" fontSize="12" fill="var(--muted)">ViewGroup · TextView (진짜 위젯)</text>
          <text x="320" y="292" textAnchor="middle" fontSize="12.5" fill="var(--muted)">웹뷰(WebView) 아님 · HTML 아님 — 각 OS의 진짜 네이티브 UI</text>
          <text x="320" y="316" textAnchor="middle" fontSize="12.5" fill="var(--rose)">설계도(JS)는 하나, 지어지는 진짜 건물은 둘</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: JS로 쓴 컴포넌트 하나가 RN을 거쳐 iOS·안드로이드의 진짜 네이티브 위젯으로 각각 변환된다</p>
        <div className="tip">
          <b>기억할 한 문장</b> RN은 "웹을 앱처럼 포장"하는 게 아니라
          "JS로 두 OS의 진짜 앱을 짓는" 도구예요. 그래서 결과물의 감촉이
          네이티브 앱과 같습니다.
        </div>
      </Section>

      <Section n={2} title="우리 React 지식이 그대로 통한다" sub="컴포넌트·state·props — 새 언어가 아니라 새 태그 세트">
        <p>
          RN 앞에서 겁먹을 필요가 없는 진짜 이유는 이거예요. <strong>React 입문에서 배운
          거의 전부가 그대로 통합니다.</strong> 컴포넌트는 여전히 "JSX를 반환하는 함수",{' '}
          <span className="icode">props</span>는 여전히 부모가 주는 읽기 전용 선물,{' '}
          <span className="icode">useState</span>는 여전히 <strong>[현재값, 바꾸는 함수]</strong>{' '}
          쌍이에요. 배우는 건 <strong>새 프로그래밍 언어가 아니라, 몇 개의 새 태그 이름</strong>일
          뿐입니다.
        </p>
        <Code>{CODE_SAME_REACT}</Code>
        <p>
          위 예제를 React 입문의 "좋아요 버튼"과 나란히 놓고 보면, 달라진 건{' '}
          <span className="icode">import</span> 출처와 태그 이름(<span className="icode">div→View</span>,{' '}
          <span className="icode">span→Text</span>,{' '}
          <span className="icode">onClick→onPress</span>)뿐이에요. "화면 = 상태의 함수",{' '}
          "state가 바뀌면 다시 그린다"는 <strong>React의 심장은 웹이든 앱이든 똑같이
          뜁니다.</strong>
        </p>
        <div className="tip">
          <b>이미 8할은 안다</b> React 입문을 마쳤다면 RN의 새 학습량은 생각보다 작아요.
          컴포넌트·JSX·props/state·이벤트·목록·useEffect는 그대로 쓰고, "웹 태그 → RN
          컴포넌트" 대응표와 스타일 방식만 새로 얹으면 됩니다. 그게 다음 두 섹션이에요.
        </div>
      </Section>

      <Section n={3} title="웹 태그 vs RN 컴포넌트" sub="div→View, span→Text — 대응표 한 장이면 절반은 끝">
        <p>
          웹에는 <span className="icode">&lt;div&gt;</span>·
          <span className="icode">&lt;span&gt;</span>·
          <span className="icode">&lt;img&gt;</span> 같은 태그가 있었죠. RN엔 그에
          <strong>대응하는 컴포넌트</strong>가 있어요. 이름만 바뀌었지 역할은 거의
          같습니다. 아래 대응표가 사실상 "웹 개발자용 RN 통역 사전"이에요.
        </p>
        <Code>{CODE_TAGS}</Code>
        <p>
          하나만 특별히 강조할게요. 웹에선 <span className="icode">&lt;div&gt;</span> 안에
          글자를 아무렇게나 써도 됐지만, RN에선 <strong>모든 글자가 반드시{' '}
          <span className="icode">&lt;Text&gt;</span> 안에</strong> 있어야 해요. 이건 실수가
          아니라 규칙이에요 — 네이티브에선 "글자를 그리는 부품"과 "레이아웃 상자"가 아예
          다른 부품이라서 그렇습니다.
        </p>
        <div className="warn">
          <b>첫날 100% 만나는 에러</b> "Text strings must be rendered within a{' '}
          &lt;Text&gt; component"가 뜨면, <span className="icode">&lt;View&gt;</span> 안에
          글자를 맨몸으로 넣은 거예요. 글자를{' '}
          <span className="icode">&lt;Text&gt;</span>로 감싸면 바로 해결됩니다.
          웹의 습관이 딱 한 번 발목을 잡는 지점이니, 미리 알아 두면 당황하지 않아요.
        </div>
      </Section>

      <Section n={4} title="스타일(StyleSheet)" sub="CSS와 닮았지만 CSS가 아니다 — 같은 점 4·다른 점 4">
        <p>
          RN에서도 색·여백·정렬을 스타일로 지정해요. 다만 별도의 CSS 파일이 아니라{' '}
          <strong>자바스크립트 객체</strong>로 씁니다.{' '}
          <span className="icode">StyleSheet.create({'{ ... }'})</span>로 스타일 묶음을 만들고,{' '}
          <span className="icode">className</span> 대신{' '}
          <span className="icode">style={'{styles.card}'}</span>처럼 객체를 건네죠.
        </p>
        <Code>{CODE_STYLE}</Code>
        <p>
          <strong>반가운 점(같은 점):</strong>{' '}
          <span className="icode">flex</span>·<span className="icode">padding</span>·
          <span className="icode">margin</span>·<span className="icode">borderRadius</span> 등
          이름과 개념이 CSS와 거의 그대로예요. 웹에서 배운 Flexbox 감각이 통째로 재사용됩니다.
        </p>
        <p>
          <strong>조심할 점(다른 점) 4가지:</strong> ① 속성 이름은 camelCase —{' '}
          <span className="icode">background-color</span>가 아니라{' '}
          <span className="icode">backgroundColor</span>. ② 크기 숫자엔 단위가 없어요(
          <span className="icode">px</span> 안 붙임). ③{' '}
          <span className="icode">flexDirection</span> 기본값이 웹의{' '}
          <span className="icode">row</span>가 아니라{' '}
          <span className="icode">column</span>(세로). ④ CSS 셀렉터·상속(캐스케이드)이 없어서
          스타일이 부모→자식으로 자동 전파되지 않아요.
        </p>
        <div className="warn">
          <b>가장 많이 헤매는 지점</b> "왜 가로로 안 놓이고 자꾸 세로로 쌓이지?" —
          RN의 <span className="icode">flexDirection</span> 기본값이{' '}
          <span className="icode">column</span>이기 때문이에요. 가로 배치를 원하면{' '}
          <span className="icode">flexDirection: 'row'</span>를 직접 적어 주세요.
          웹 Flexbox의 기본이 <span className="icode">row</span>였던 것과 정반대라 꼭 기억!
        </div>
      </Section>

      <Section n={5} title="Expo로 5분 만에 시작하기" sub="설치 지옥 없이, 내 진짜 폰에서 바로 실행">
        <p>
          예전엔 앱 개발 첫걸음이 "안드로이드 스튜디오·Xcode 설치와 설정"이라는 큰 산이었어요.{' '}
          <strong>Expo</strong>는 그 산을 치워 줍니다. Node.js만 있으면 명령어 몇 줄로 프로젝트를
          만들고, <strong>내 폰에 깐 <span className="icode">Expo Go</span> 앱으로 QR코드만
          스캔하면</strong> 방금 만든 앱이 진짜 폰에서 바로 돌아가요.
        </p>
        <Code>{CODE_EXPO}</Code>
        <p>
          더 좋은 건, 코드를 저장하는 순간 폰 화면이 즉시 갱신되는{' '}
          <strong>Fast Refresh</strong>예요. React 입문 마지막에 느낀 웹의{' '}
          <span className="icode">HMR</span>(저장하면 브라우저가 즉시 바뀌던 그 경험)과{' '}
          <strong>똑같은 감각</strong>을 폰에서 그대로 느낄 수 있습니다. "코드 저장 → 폰에서
          즉시 확인"의 리듬이 앱 개발의 일상이에요.
        </p>
        <div className="tip">
          <b>오늘의 실습</b> 컴퓨터에 Node.js가 있다면 위 3줄을 그대로 따라 해 보세요.
          <span className="icode">MirimApp</span>이 뜨면{' '}
          <span className="icode">App.js</span>의 글자 하나를 바꿔 저장 → 폰 화면이 즉시
          바뀌는 걸 눈으로 확인! "앱이 이렇게 가볍게 시작되는구나"를 몸으로 느끼는 게
          이 코스의 목표 절반입니다.
        </div>
      </Section>

      <Section n={6} title="네이티브 모듈과 한계" sub="어디까지 JS로 되고, 어디부터 네이티브가 필요한가">
        <p>
          "그럼 카메라·위치·푸시 알림 같은 폰 기능은 어떻게 써요?" 좋은 질문이에요.
          답은 <strong>네이티브 모듈</strong>입니다. 다행히 흔한 기능은{' '}
          <strong>이미 누군가 모듈로 만들어 뒀어요.</strong> npm으로 설치해서 평소처럼
          JS로 <span className="icode">import</span> 해 쓰면 됩니다.
        </p>
        <Code>{CODE_NATIVE}</Code>
        <p>
          정말 아무도 안 만든 특수 기능이 필요할 때만, 얇게{' '}
          <strong>진짜 네이티브 코드(안드로이드는 Kotlin/Java, iOS는 Swift/Objective-C)</strong>를
          작성해 JS와 연결해요. 실무에서 이런 일은 자주 있지 않습니다. RN의 전형적인 그림은
          <strong>"화면·로직은 JS로 대부분, 정말 필요한 얇은 층만 네이티브"</strong>예요.
        </p>
        <div className="warn">
          <b>과장하지 않기</b> RN이 만능은 아니에요. 초저지연 그래픽·고사양 게임 같은
          극한 성능은 순수 네이티브가 유리하고, 스토어 출시는 결국 각 OS의 빌드 과정(클라우드로
          대신 해 주는 <span className="icode">EAS Build</span>도 있음)이 필요합니다.
          이 코스의 목표는 "2개월에 앱 전문가"가 아니라 <strong>지형을 정확히 읽는 눈</strong>을
          갖는 거예요 — 어디까지 내 React로 갈 수 있고, 어디서 도움이 필요한지를 아는 것.
        </div>
      </Section>

      <Section n={7} title="우리 팀에게 RN이 특히 매력적인 이유" sub="같은 언어·같은 개념·같은 우리 Spring API">
        <p>
          왜 하필 이 회사에서 RN 이야기를 할까요? <strong>우리 스택과 궁합이 좋기 때문</strong>이에요.
          우리 프론트는 이미 <strong>React + JavaScript/TypeScript</strong>, 백엔드는{' '}
          <strong>Spring Boot REST API</strong>입니다. RN은 그 프론트와 <strong>같은 언어,
          같은 React 개념</strong>을 쓰죠. 즉 웹을 만들던 사람이 큰 재학습 없이 앱도 손댈 수
          있다는 뜻이에요.
        </p>
        <Code>{CODE_WHY_US}</Code>
        <p>
          결정적으로, 앱은 <strong>우리 Spring API를 웹과 똑같이{' '}
          <span className="icode">fetch</span>로 호출</strong>해요. 서버는 한 벌 그대로 두고,
          화면 코드의 "태그 이름"만 바꿔 안드로이드·iOS 앱을 얹는 셈입니다. React 입문에서
          배운 <span className="icode">useEffect</span> + <span className="icode">fetch</span>{' '}
          패턴이 앱에서도 판박이로 재등장하죠.
        </p>
        <div className="tip">
          <b>연결해서 보기</b> "네트워크의 이해" 코스에서 배운 HTTP 요청, React 입문에서 배운{' '}
          <span className="icode">useEffect</span> 데이터 로딩 — 이 둘이 RN 앱에서 그대로
          다시 쓰입니다. 배운 게 사라지지 않고 <strong>새 플랫폼에서 복리로 불어나는</strong>{' '}
          느낌, 그게 우리가 React 계열을 붙잡는 이유예요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📱 여기까지 왔다면</h3>
          <p className="muted">
            이제 "React Native = JS로 짓는 진짜 네이티브 앱"이라는 문장을,{' '}
            태그 대응표·StyleSheet·Expo·네이티브 한계라는 단어들로 설명할 수 있게 됐어요.
            무엇보다 <strong>내가 배운 React가 앱까지 이어진다</strong>는 지형을 손에 넣었습니다.
            RN이 "우리 React를 그대로 쓰는 길"이었다면, 다음은 <strong>완전히 다른 접근</strong>으로
            같은 목표(하나의 코드로 두 OS)에 도달하는{' '}
            <Link to="/learn/flutter"><strong>Flutter</strong></Link>를 만나 볼 차례예요.
            두 길을 나란히 놓고 보면 "앱 개발의 지도"가 훨씬 또렷해집니다.
          </p>
        </div>
      </div>
    </div>
  );
}
