expo에서 tabs로 동적라우팅 설계할때

React Navigation 라이브러리를 사용하여 동적 라우팅을 다룰 수 있습니다. 이 라이브러리는 그룹화된 탭 내에서 별도의 스택 네비게이터(Stack Navigator)를 설정하면서 동적 라우트를 처리하는 것을 허용합니다. 폴더 구조에 대한 가장 일반적인 접근 방식은 각각의 탭(예시: gym, board, search, profile)이 자체 하위 폴더와 파일들을 가지도록 하는 것입니다. ``` /my-app |-- /src |-- /navigation |-- BottomTabNavigator.js |-- /screens |-- /gym ... |-- /board ... |-- /search ... |-- /profile |-- index.js // This is your main Profile screen. |-- /[userId].js // This is your dynamic route for user profiles. ``` `BottomTabNavigator.js`은 각각의 탭에 등록할 스택 네비게이터를 포함해야 합니다. ```javascript import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createStackNavigator } from '@react-navigation/stack'; import ProfileScreen from '../screens/profile/index'; import UserScreen from '../screens/profile/[userId]'; const Tab = createBottomTabNavigator(); const ProfileStack = createStackNavigator(); const ProfileStackNavigator = () => { return ( <ProfileStack.Navigator> <ProfileStack.Screen name="Profile" component={ProfileScreen} /> <ProfileStack.Screen name="User" component={UserScreen} /> </ProfileStack.Navigator> ); } export const BottomTabNavigator = () => { return ( <Tab.Navigator> // your other tabs here... <Tab.Screen name="Profile" component={ProfileStackNavigator} /> </Tab.Navigator> ); } ``` 이런식으로 설정하면, `Profile` 탭을 클릭했을 때는 `ProfileScreen`이 보여집니다. 그리고 사용자를 클릭할 때에는 동적 경로가 적용되어 `/profile/:userId` 형태로 url이 변경되며, `UserScreen` 이 보여지게 됩니다. 사용자 스크린으로 이동하기 위해서는 다음과 같은 방식으로 네비게이트하면 됩니다. ```javascript navigation.navigate('User', { userId: '123' }); ``` 필요에 따라 폴더 구조를 세분화하여 관리할 수 있습니다. 그 외에도 네비게이션의 추가 설정 등 다양한 기능을 제공하는 React Navigation 라이브러리에 대해 좀 더 알아보시면 도움이 될 것 같습니다.