내가 만드는 앱의 "화면흐름"을 자동화하기
"화면흐름"
앱을 만들다 보면 공통적인 두 가지의 흐름이 있다.
첫 번째, 앱을 설명하는 흐름
두 번째, 앱을 이용하는 흐름
이 두 개의 흐름을 자연스럽게 연결하기 위해서 명칭을 정해보았다.
앱을 설명하는 흐름 = 온보딩
앱을 이용하는 흐름 = 메인
이제 이 두 흐름 사이에 적용되는 규칙이 있다. 바로 로그인을 한 사람만 "메인"으로 넘어갈 수 있다는 것이다.
그래서 내가 공통적으로 정의하고 싶은 흐름은 아래와 같다.
[온보당 -> 로그인을 했는가? -> 메인]
우선 이 흐름을 정의하기 전에 내가 내비게이션을 사용하겠습니다!라고 선언해 주는 내비게이션 컨테이너를 먼저 만들어야 한다.
파일경로: /src/ui/navigation/RootNavigation.tsx
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {useNavigationLogger} from '@/ui/hooks/useNavigationLogger';
import {createDeepLink} from '@/ui/navigation/deepLink';
import {APP_NAME} from '@env';
import useAppInitialization from '@/ui/hooks/useAppInitialization';
import DrawerNavigator from '@/ui/navigation/navigators/DrawerNavigator';
import Loading from '@/ui/components/Loading';
const RootNavigation = () => {
const navigationLogger = useNavigationLogger();
const {
isInitializedUser,
isInitializedLanguage,
isLoggedIn,
isOnboardingCompleted,
} = useAppInitialization();
console.log('✅ 초기화 완료', {
isInitializedUser,
isInitializedLanguage,
isLoggedIn,
isOnboardingCompleted,
});
return (
<NavigationContainer
ref={navigationLogger.navigationRef}
onReady={navigationLogger.handleReadyNavigation}
onStateChange={navigationLogger.handleStateChangeNavigation}
linking={createDeepLink(APP_NAME)}>
{isInitializedUser === null || isInitializedLanguage === null? (
<Loading />
) : (
<DrawerNavigator
isLoggedIn={isLoggedIn}
isOnboardingCompleted={isOnboardingCompleted}
/>
)}
</NavigationContainer>
);
};
export default RootNavigation;
이어서 온보딩과 메인 화면의 흐름을 결정하기 위한 isLoggedIn과 함께 하위 내비게이션을 추가한다.
파일경로: /src/ui/navigation/navigators/DrawerNavigator.tsx
import React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import OnboardingStackNavigator from '@/ui/navigation/navigators/OnboardingStackNavigator';
import AppStackNavigator from '@/ui/navigation/navigators/AppStackNavigator';
import DrawerContents from '@/ui/navigation/navigators/DrawerContents';
import {wp} from '@/ui/styles/globalStyles';
import RouteProps from '@/ui/navigation/RouteProps';
type DrawerProps = {
isLoggedIn: boolean;
isOnboardingCompleted: boolean;
};
const Drawer = createDrawerNavigator <RouteProps>();
const DrawerNavigator = ({isOnboardingCompleted}: DrawerProps) => {
return (
<Drawer.Navigator
drawerContent={DrawerContents}
screenOptions={{
headerShown: false,
drawerStyle: {
width: wp(300),
},
swipeEnabled: false,
}}
initialRouteName={isOnboardingCompleted? 'App' : 'Onboarding'}>
<Drawer.Screen name="Onboarding" component={OnboardingStackNavigator} />
<Drawer.Screen name="App" component={AppStackNavigator} />
</Drawer.Navigator>
);
};
export default DrawerNavigator;
이제 이 두 코드의 파일을 그대로 hbs 파일로 만들고, 생성해 보았다!
output 폴더에 생성된 코드가 보인다!
흐름을 관리하는 코드는 여러 가지 외부 코드를 사용하고 있지만, 해당 코드들은 아직 구현이 되어있지 않은 부분도 있기 때문에, 우선은 공통적으로 쓸 코드만 열심히 템플릿으로 만들어 둘 예정이다.
이제 내비게이션도 생각 없이 만들 수 있겠지...
