Expo Router v2에 대해

1. Expo Router란?

Expo Router는 Next.js 스타일의 파일 기반 라우팅을 React Native에서 사용할 수 있도록 해주는 라이브러리입니다.
React Native에서 기존의 react-navigation을 사용해 네비게이션을 구성하는 것과 달리, 파일 시스템을 활용한 직관적인 라우팅 방식을 제공합니다.

2024년 Expo Router v2가 출시되면서 더욱 강력한 기능과 개선된 API가 추가되었습니다. 이번 글에서는 Expo Router v2의 핵심 개념과 활용법을 쉽게 설명하겠습니다.

---

2. Expo Router v2의 주요 특징

✅ 파일 기반 라우팅

• pages/ 폴더 내에 파일을 생성하면 자동으로 경로가 설정됩니다.

• 예를 들어, 다음과 같은 구조라면:

  app/
  ├── index.tsx       → '/' (홈 화면)
  ├── profile.tsx     → '/profile'
  ├── settings/
  │   ├── index.tsx   → '/settings'
  │   ├── account.tsx  → '/settings/account'

  • index.tsx는 해당 폴더의 기본 경로로 설정됩니다.
  • profile.tsx는 /profile 경로에 자동으로 매핑됩니다.

✅ React Native 전용 최적화

• Expo Router는 React Native 환경에 최적화되어 있으며, expo-linking과의 통합을 통해 웹과 모바일에서 일관된 네비게이션을 제공합니다.

✅ 동적 경로 & 캐치올(Catch-All) 라우팅

• [id].tsx → /user/123 (동적 경로)
• [...notFound].tsx → /anything/here (모든 경로를 잡는 캐치올 라우팅)

✅ 웹과 네이티브 환경 모두 지원

• Expo Router는 웹에서도 동일한 파일 기반 라우팅을 제공하여 React Native Web을 활용한 크로스 플랫폼 개발을 쉽게 만듭니다.

---

3. Expo Router v2 설치 및 기본 설정

1️⃣ 설치하기

Expo Router v2를 사용하려면 최신 Expo 프로젝트에서 다음 명령어를 실행하세요.

npx expo install expo-router

또는 새 Expo 프로젝트를 Expo Router와 함께 생성할 수도 있습니다.

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

2️⃣ _layout.tsx 파일 설정하기

Expo Router는 기본적으로 레이아웃 파일을 기반으로 동작합니다.
app/_layout.tsx 파일을 만들어서 모든 페이지에 공통적인 네비게이션 구조를 적용할 수 있습니다.

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: '홈' }} />
      <Stack.Screen name="profile" options={{ title: '프로필' }} />
    </Stack>
  );
}

3️⃣ 페이지 생성하기

이제 app/profile.tsx 파일을 생성하고 기본 화면을 만들어봅시다.

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

export default function ProfileScreen() {
  return (
    <View>
      <Text>프로필 화면</Text>
    </View>
  );
}

이제 앱을 실행하면 /profile 경로에서 해당 화면을 확인할 수 있습니다!

---

4. 동적 경로와 네비게이션

1️⃣ 동적 라우팅 ([id].tsx)

Expo Router에서는 동적 경로를 쉽게 설정할 수 있습니다. 예를 들어, app/user/[id].tsx 파일을 만들면 /user/123 같은 경로를 처리할 수 있습니다.

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

export default function UserProfile() {
  const { id } = useLocalSearchParams();

  return (
    <View>
      <Text>사용자 ID: {id}</Text>
    </View>
  );
}

2️⃣ 페이지 이동 (useRouter)

Expo Router에서는 useRouter 훅을 사용하여 프로그래밍 방식으로 페이지 이동이 가능합니다.

import { useRouter } from 'expo-router';
import { Button, View } from 'react-native';

export default function HomeScreen() {
  const router = useRouter();

  return (
    <View>
      <Button title="프로필로 이동" onPress={() => router.push('/profile')} />
    </View>
  );
}

---

5. Expo Router v2 vs React Navigation

기능	Expo Router v2	React Navigation
라우팅 방식	파일 기반	코드 기반 (Stack, Tab 등)
웹 지원	✅	❌ (추가 설정 필요)
코드 가독성	높음	중간
동적 경로 처리	✅ ([id].tsx)	✅ (params 이용)
네비게이션 성능	최적화됨	최적화 필요

👉 결론: 파일 기반 라우팅이 직관적이고, 웹과의 호환성을 고려한다면 Expo Router v2가 더 적합합니다. 하지만 기존의 React Navigation을 잘 활용하고 있고, 프로젝트에 맞는다면 그대로 사용해도 무방합니다.

---

6. 마무리

Expo Router v2는 React Native 개발을 더욱 직관적이고 강력하게 만들어주는 파일 기반 라우팅 솔루션입니다. 기존 React Navigation에 익숙하다면 새로운 방식이 조금 낯설 수 있지만, 웹 개발 경험이 있다면 빠르게 적응할 수 있습니다.

✨ 정리하자면:

✅ 파일 기반 라우팅으로 코드 가독성이 향상됨
✅ 동적 경로, 중첩 네비게이션을 쉽게 구현 가능
✅ React Native Web과 완벽한 통합 지원
✅ 기존 React Navigation보다 더 직관적이고 간결한 코드 작성 가능