React Navigation의 Bottom Tab Navigator 아이콘 동작 원리 살펴보기

React Native 앱을 개발하다 보면 하단 탭 네비게이션을 구현할 일이 많은데요. 이번에는 React Navigation의 Bottom Tab Navigator에서 탭 아이콘이 어떻게 동작하는지 자세히 살펴보려고 합니다.

기본 구현 방식

Bottom Tab Navigator에서 각 탭의 아이콘은 다음과 같이 구현됩니다:

<Tab.Screen
  name="Map"
  component={MapScreen}
  options={{
    title: '부스찾기',
    tabBarIcon: ({color, size}) => (
      <MaterialCommunityIcons
        name="map-marker-check-outline"
        size={size}
        color={color}
      />
    ),
  }}
/>

여기서 주목할 점은 tabBarIcon이 함수라는 것입니다. 이 함수는 color와 size 두 가지 파라미터를 받아서 아이콘 컴포넌트를 반환합니다.

색상 처리 방식

탭 아이콘의 색상은 탭의 활성화 상태에 따라 자동으로 변경됩니다. 이는 Navigator 설정에서 정의한 색상값을 기반으로 동작합니다:

<Tab.Navigator
  screenOptions={{
    tabBarActiveTintColor: colors.tab.active,     // 활성 상태 색상
    tabBarInactiveTintColor: colors.tab.inactive, // 비활성 상태 색상
  }}
>

React Navigation은 내부적으로 현재 선택된 탭을 추적하고 있다가:

• 탭이 선택되면 → tabBarActiveTintColor 값을
• 선택되지 않은 탭은 → tabBarInactiveTintColor 값을

tabBarIcon 함수의 color 파라미터로 전달합니다.

크기(size) 파라미터

size 파라미터는 React Navigation이 제공하는 기본값(24)을 사용합니다. 이 값은 대부분의 경우 모바일 UI에 적절한 크기로 설정되어 있어 별도의 수정 없이도 잘 작동합니다.

실제 동작 흐름

전체적인 동작 흐름을 정리하면 다음과 같습니다:

1. 탭이 처음 렌더링될 때 React Navigation이 tabBarIcon 함수를 호출
2. 사용자가 탭을 선택할 때마다:
   • 선택된 탭 → tabBarActiveTintColor 색상으로 다시 렌더링
   • 다른 탭들 → tabBarInactiveTintColor 색상으로 다시 렌더링
3. 각 렌더링마다 기본 size 값(24)이 전달됨

마치며

이렇게 React Navigation은 선언적인 방식으로 탭 아이콘의 상태 관리를 자동화해주고 있습니다. 개발자는 각 상태에 대한 스타일만 정의해두면, 실제 상태 변화에 따른 UI 업데이트는 React Navigation이 알아서 처리해주죠.

이러한 방식은 코드의 가독성을 높이고 상태 관리에 대한 부담을 줄여주어, 더 효율적인 개발을 가능하게 합니다.