Expo의 페이지/다이나믹 라우팅 (expo-router)Expo's page/dynamic routing (expo-router)
📅
🚀
들어가기 전에 🔗
✅
Expo의 라우팅 🔗
엑스포 라우터는 React Native 및 웹 애플리케이션을 위한 파일 기반 라우터입니다. 이를 통해 앱의 화면 간 탐색을 관리하여 사용자가 여러 플랫폼(Android, iOS, 웹)에서 동일한 컴포넌트를 사용하여 앱 UI의 여러 부분 사이를 원활하게 이동할 수 있도록 합니다.
App 디렉토리에 파일이 추가되면 해당 파일은 자동으로 내비게이션의 경로가 됩니다.
우리는 이 Expo 라우팅에서 지원하는 기능인 페이지/다이나믹 라우팅에 대해 알아보겠습니다.🚀
1. 페이지 생성 🔗
앱 디렉토리에 파일이 생성되면 자동으로 앱의 경로가 됩니다. 예를 들어 다음 파일은 다음과 같은 경로를 생성합니다.
📦 app
┣ 📜 index.tsx -> '/'
┣ 📜 home.tsx -> '/home'
┣ 📂 setting
┗ ┗ 📜 index.tsx -> '/setting'
위의 예시에서
index.tsx는 루트 경로로 설정되고, home.tsx는 /home 경로로 설정됩니다. 이렇게 설정된 경로는 다음과 같이 사용할 수 있습니다.import { router } from 'expo-router';
import { Button } from 'react-native';
export default function Index() {
return (
<>
<Button
title="Go to Home"
onPress={() => router.push('/home')}
/>
<Button
title="Go to Setting"
onPress={() => router.push('/setting')}
/>
</>
);
}🚀
2. 레이아웃 설정 🔗
디렉토리의 레이아웃 파일은 헤더, 탭 표시줄과 같은 공유 UI 요소를 정의하여 서로 다른 경로 간에 지속되도록 하는 데 사용됩니다. 새 프로젝트를 만들 때마다 기본적으로 앱 디렉터리에는 루트 레이아웃 파일(app/_layout)이 포함됩니다. 이 파일은 모든 경로에 대한 레이아웃을 정의합니다. 레이아웃 파일은 다음과 같이 사용할 수 있습니다.
📦app
┣ 📜 _layout.tsx -> 루트 레이아웃
┣ 📜 index.tsx
┣ 📜 home.tsx
┣ 📂 setting
┗ ┗ 📜 index.tsx -> /setting에 적용되는 레이아웃
🚀
3. 라우트에 그룹 설정 🔗
라우트 그룹은 라우트를 그룹화하여 레이아웃을 공유하도록 지정하는 데 사용됩니다. 라우트 그룹은 다음과 같이 사용할 수 있습니다.
(그룹명)
이렇게 생성한 그룹은 라우트의 주소에 영향을 주지 않습니다
.📦app
┣ 📜 _layout.tsx
┣ 📜 index.tsx
┣ 📜 home.tsx
┣ 📂 setting
┗ ┗ 📜 index.tsx
┗ 📂 (group) -> 그룹 생성
┗ ┗ 📜 _layout.tsx
┣ ┗ 📜 sitemap.tsx -> '/sitemap'
┗ ┗ 📜 about.tsx -> '/about'
🚀
4. 다이나믹 라우팅 🔗
다이나믹 라우팅은 경로에 동적 매개변수를 사용하여 경로를 생성하는 방법입니다. 동적 매개변수는 경로의 일부로 사용되며, 경로의 다른 부분에 영향을 주지 않습니다. 다이나믹 라우팅은 다음과 같이 사용할 수 있습니다.
[]📦app
┣ 📜 _layout.tsx
┣ 📜 index.tsx
┣ 📜 home.tsx
┣ 📂 user
┗ ┗ 📜 [id].tsx -> '/user/{id}'
위의 예시에서
user/[id].tsx는 /user/{id} 경로로 설정됩니다. 이렇게 설정된 경로는 다음과 같이 사용할 수 있습니다.import { router } from 'expo-router';
import { Button } from 'react-native';
export default function Index() {
return (
<>
<Button
title="Go to User"
onPress={() => router.push('/user/1')}
/>
</>
);
}id는 동적 매개변수로 사용되며, user/[id].tsx 파일에서 id를 사용할 수 있습니다.import { useLocalSearchParams } from 'expo-router';
import { Text, View } from 'react-native';
export default function User() {
const { id } = useLocalSearchParams();
return (
<View>
<Text>{id}</Text>
</View>
);
}🚀
문제 발생 및 해결 🔗
✅
폴더에 다이나믹 라우팅을 설정할 수는 없을까??? 🔗
원하는 것
📦app
┣ 📜 _layout.tsx
┣ 📜 index.tsx
┣ 📜 home.tsx
┣ 📂 [id]
┣ ┣ 📜 mypage.tsx -> '/{id}/mypage'
┗ ┗ 📜 edit.tsx -> '/{id}/edit'
결론적으로, 다이나믹 라우팅은 폴더에도 적용이 가능합니다. 폴더에 다이나믹 라우팅을 적용하려면 폴더 이름을
[]로 설정하면 됩니다.import { useLocalSearchParams } from 'expo-router';
import { Text, View } from 'react-native';
export default function MyPage() {
const { id } = useLocalSearchParams<{ id: string }>();
return (
<View>
<Text>{id}</Text>
</View>
);
}🚀
결론 🔗
Next.js의 앱 라우팅 방식과 비슷하면서도 다양한 기능을 제공하는 Expo의 라우팅을 알아보았습니다. 이를 통해 앱의 화면 간 탐색을 관리하여 사용자가 여러 플랫폼(Android, iOS, 웹)에서 동일한 컴포넌트를 사용하여 앱 UI의 여러 부분 사이를 원활하게 이동할 수 있도록 합니다.
✅
더 생각해 보기 🔗
- 플랫폼별 라우팅 설정
- Expo Router 3.5.x 버전부터는 플랫폼별 라우팅 설정이 가능합니다. 이를 통해 ios, android, web 플랫폼에 따라 다른 라우팅을 설정할 수 있습니다.
- Platform specific extensions↗
✅