00. 들어가며

많은 기술 스택과 자격들을 신입들에게 요구하는 시대. React-Native, Firebase, NativeWind (TailWind의 React Native Ver) 등등을 사용하여 출석 체크 앱을 만들어보고자 한다. Firebase 부분이 조금 어려울 것 같지만,, 프로젝트하면서 공부하는 점들을 짧게라도 정리해보기로!

++ 프로젝트의 환경을 세팅하는 것은 많이 해보았으니까, 바로 다음 단계인 React Native는 Routing을 어떻게 관리하는지 알아보자.

01. React Navigation

React Native의 표준 라우터 라이브러리는 React Navigation이다. 이 안에 Stack Navigator, Bottom Tab Navigator, Drawer Navigator등 여러 내비게이션 방법이 준비되어있다. 이 중 가장 많이 쓰이는 것은 Stack과 Bottom Tab.

1) Stack Navigator

화면을 위에 쌓는 구조인 Stack Navigator. (A->B->C) 의 구조로 쌓는다. 예시로는 로그인 -> 홈 -> 디테알 화면과 같이 순차적인 사용자 흐름을 생각하면 된다.

2) Tab Navigator

하단 탭으로 화면 이동을 가능하게 하는 Tab Navigator. (아이콘 + 레이블)의 구조로 구성되어있다. 대중적으로 빠른 이동을 보장한다. 홈/검색/마이페이지와 같이.

3) Drawer Navigator

왼쪽/오른쪽에서 슬라이드로 여는 메뉴를 생각하면 된다. 사이드 메뉴로 이동을 가능하게 함.

02. Navigator 코드 예시

1) Stack Navigator

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createNativeStackNavigator();

export default function StackNavigator() {
 return (
     <Stack.Navigator>
       <Stack.Screen name="Main" component={TabNavigator} /> // 이 부분에서 Tab Navigator를 사용하여 이동한다 
       <Stack.Screen name="Detail" component={DetailScreen} />
     </Stack.Navigator>
 );
}

또한 기본적으로 Tab으로 돌아다니다가 특정 상황에서 Stack으로 화면을 추가하는 패턴이다.

2) Tab Navigator

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Tab = createBottomTabNavigator();

export default function TabNavigaotr() {
  return (
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
  );
}

그렇다면 Tab Navigator는 Tab 을 통해 이동할 수 있도록 보장해야한다.

이제 이 두 Navigator들을 사용할 수 있도록 App.tsx에서

import { NavigationContainer } from '@react-navigation/native';
import StackNavigator from './StackNavigator';

export default function RootNavigation() {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
}

이 Navigator들을 감싸주는 NavigationContainer 를 사용하여 감싸는 구조로 구성되어있다.

일반적으로는 위 구조를 따르지만, 이제 Home 탭 Profile 탭이 있다고 가정했을 때, 해당 Stack의 Navigator 위에서 화면 이동을 보장받을 수 있도록 한다.

3. Tab Navigator 디자인

해당 Tab은 디자인을 필요로 한다. 이 때문에 각자 사용하는 환경의 CSS에 맞게 커스터마이징을 해줘야한다. 아래는 간단한 CSS를 기반으로 디자인한 코드 예시이다.
또한 이 외에도 특정 페이지에서 Tab Navigator를 보이지 않게 하려면, headerShown 파라미터를 사용할 수 있다.

<Tab.Navigator
  screenOptions={{
    tabBarStyle: { backgroundColor: 'white', height: 70 },
    tabBarLabelStyle: { fontSize: 14 },
    tabBarIcon: ({ color, size }) => (
      <Icon name="home" color={color} size={size} />
    ),
  }}
>
  ...
</Tab.Navigator>