프로필 스택 네비게이션 구조 설계하는 법 (React Navigation)

React Navigation에서는 Stack Navigator를 사용하여 찾고 있는 것처럼 프로필 화면을 어디서든 접근할 수 있도록 설계할 수 있습니다. 가장 바깥쪽에 RootStack이라는 Stack Navigator를 만들어 그 안에 Main Tab Navigator와 ProfileStack을 넣을 수 있습니다. 이렇게 하면 Main Tab 내의 어떤 화면에서든 ProfileStack으로 액세스 할 수 있게 됩니다. 다음은 적용 예시입니다: ```jsx const MainTab = createBottomTabNavigator(); const ProfileStack = createStackNavigator(); const RootStack = createStackNavigator(); function MainTabScreen() { return ( <MainTab.Navigator> {/* 여기에 기존의 탭과 스크린들을 정의 */} </MainTab.Navigator> ); } function ProfileStackScreen() { return ( <ProfileStack.Navigator> {/* 여기에 프로필 관련 스크린들을 정의 */} </ProfileStack.Navigator> ); } export default function App() { return ( <NavigationContainer> <RootStack.Navigator mode="modal"> <RootStack.Screen name="Main" component={MainTabScreen} options={{ headerShown: false }} /> <RootStack.Screen name="Profile" component={ProfileStackScreen} /> </RootStack.Navigator> </NavigationContainer> ); } ``` 이제 각 스크린에서 `navigation.navigate('Profile')`를 호출하면 프로필 스택으로 이동하게 됩니다. 'Profile'은 스택 네비게이터에 정의된 스크린 이름입니다. 여기서 RootStack은 `mode=modal`로 설정되어 있어 ProfileStack을 별도의 모달로 보여주고, MainTab 아래에서 독립적으로 작동합니다. 따라서 필요에 따라 이 설정을 변경해서 사용할 수 있습니다.