🚏 61. Expo Router 완전 입문 - React Native 앱 라우팅 혁신

---

React Native에서 라우팅은 꽤나 번거로운 일이었다.
react-navigation을 직접 설정하고, stack/screen 등을 일일이 등록해야 했기 때문.
하지만! Expo에서 Next.js의 파일 기반 라우팅을 가져온 Expo Router를 통해,
라우팅 구조가 훨씬 단순하고, 직관적으로 바뀌었다! 😎

---

📂 폴더 기반 라우팅

Expo Router는 app/ 폴더의 구조를 기반으로 자동 라우팅을 설정한다.

📁 app/
 ┣ 📁 index.tsx        → '/'
 ┣ 📁 about.tsx        → '/about'
 ┣ 📁 profile/
 ┃ ┗ 📁 [id].tsx       → '/profile/:id'
 ┗ 📁 settings/
   ┣ index.tsx         → '/settings'
   ┗ notifications.tsx → '/settings/notifications'

파일/폴더 구조 = URL 경로
👉 진짜로 Next.js 느낌이 그대로!

---

🧪 설치 & 기본 사용

npx create-expo-app my-app -t with-router

설치 후에는 바로 app/ 폴더로 라우팅을 시작할 수 있다.

// app/index.tsx
import { Link } from 'expo-router';

export default function Home() {
  return (
    <Link href="/about">About 페이지로 이동</Link>
  );
}

Link 컴포넌트로 네비게이션도 심플하게 처리 가능!

---

🧭 네비게이션 구조

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function Layout() {
  return <Stack />;
}

• _layout.tsx를 통해 공통 Stack, Tab 등을 정의하고
• app/ 내부의 파일 구조로 화면이 자동 연결된다.

---

⚙️ 고급 기능

기능	설명
동적 라우팅	[id].tsx, [...slug].tsx 등 Next.js와 유사
중첩 네비게이션	Tab, Stack, Drawer 중첩 가능
Layout 그룹	(group)/screen.tsx으로 분리 가능
리디렉션	redirect() 함수 사용
네이티브 모달	modal.tsx로 설정하면 자동 모달 처리

---

🧠 느낀 점

처음엔 "라우터가 바뀌어서 뭐가 좋지?" 싶었는데,
막상 써보면 라우팅 구조가 너무 깔끔하고 유지보수가 편함.
화면이 많아질수록 이 구조가 진가를 발휘함을 느낀다.

파일 기반 라우팅에 익숙한 프론트엔드 개발자라면
React Native 진입 장벽이 크게 낮아질 수 있는 구조라 느꼈음! 🙌

---

🔥 "Expo Router는 단순한 라우팅 도구를 넘어서, React Native 앱 구조 자체를 혁신한다!"

---