Expo Router로 탐색 구현하기

엑스포 라우터란 무엇인가요

설치

# Create new project:
npx create-expo-app@latest my-app --template tabs

# Or add to existing Expo project:
npx expo install expo-router react-native-safe-area-context react-native-screens

파일 기반 경로

app/
  _layout.tsx       # root layout (Stack navigator)
  index.tsx          # → / (home screen)
  profile.tsx        # → /profile
  posts/
    _layout.tsx      # posts stack layout
    index.tsx        # → /posts
    [id].tsx         # → /posts/123 (dynamic)

루트 레이아웃

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

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="profile" options={{ title: 'Profile' }} />
    </Stack>
  );
}

Link를 사용한 탐색

import { Link } from 'expo-router';

function HomeScreen() {
  return (
    <Link href="/profile">Go to Profile</Link>
  );
}

useRouter를 사용한 탐색

import { useRouter } from 'expo-router';

function LoginForm() {
  const router = useRouter();

  async function handleLogin() {
    await login();
    router.replace('/dashboard');
  }
}

동적 경로

// app/posts/[id].tsx
import { useLocalSearchParams } from 'expo-router';

export default function PostScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <PostDetail postId={id} />;
}

탭 탐색

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home', tabBarIcon: ({ color }) => <HomeIcon color={color} /> }} />
      <Tabs.Screen name="explore" options={{ title: 'Explore' }} />
    </Tabs>
  );
}

모달 화면

// app/_layout.tsx
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Settings' }} />

// Navigate to modal:
router.push('/modal');

딥 링크

// app.json
{
  "expo": {
    "scheme": "myapp"
  }
}

인증 패턴

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

function RootLayout() {
  const { user } = useAuth();
  if (!user) return <Redirect href="/login" />;
  return <Stack />;
}

빠른 확인

복습