React Native 하단 탭 네비게이션 구현하기: Tab Navigation 기본 구조

Stack Navigation으로
화면 이동까지 구현했다면
이제 앱 구조가 조금 보이기 시작한다.

하지만 실제 앱을 떠올려보면
대부분 이런 형태다.

• 하단에 탭이 있고
• 홈 / 검색 / 설정 같은 화면이 고정되어 있음
• 화면을 왔다 갔다 해도 탭은 유지됨

이 구조를 만드는 게
**Tab Navigation(탭 네비게이션)**이다.

이번 글에서는
react-navigation 기반 하단 탭 구조를 처음부터
입문자 기준으로 정리한다.

---

이 글이 필요한 사람

• 하단 탭이 있는 앱 구조를 만들고 싶은 경우
• Stack과 Tab을 어떻게 같이 써야 할지 헷갈리는 경우
• 실제 앱 같은 구조로 확장하고 싶은 경우

---

Tab Navigation이 필요한 이유

Stack Navigation만 쓰면
화면이 계속 쌓이는 구조가 된다.

• 홈 → 상세 → 설정 → 다시 홈
  이런 흐름이 자연스럽지 않다.

Tab Navigation은
앱의 주요 화면을 고정해준다.

• 홈
• 검색
• 마이페이지
• 설정

이 화면들은
언제든지 바로 접근 가능해야 한다.

[이미지: 하단 탭 네비게이션 구조 개념]

---

Tab Navigation 기본 개념

Tab Navigation의 핵심은 이거다.

탭 하나 = 하나의 화면 흐름

각 탭 안에서
Stack Navigation을 다시 쓸 수도 있다.

그래서 실무에서는 보통
Tab + Stack을 함께 사용한다.

---

하단 탭 라이브러리 설치

Expo 기준으로 설치한다.

npm install @react-navigation/bottom-tabs

이미 @react-navigation/native가 설치돼 있다면
추가 설치만 하면 된다.

---

Tab Navigator 생성

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

이제 탭 네비게이터를 구성할 수 있다.

---

가장 단순한 Tab Navigation 예제

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return <Text>홈 화면</Text>;
}

function SettingsScreen() {
  return <Text>설정 화면</Text>;
}

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

이 코드만으로도
하단 탭이 있는 앱 구조가 만들어진다.

---

Tab.Screen의 name은 왜 중요할까

• 탭 라벨로 사용됨
• navigation 이동 기준이 됨
• 디버깅 시 화면 구분 기준

실무에서는
사용자에게 보이는 이름과 내부 name을 분리하기도 한다.

이건 나중에 다뤄도 된다.

---

Stack과 Tab 함께 쓰는 구조 (중요)

실제 앱에서 가장 흔한 구조는 이렇다.

• Tab
  • HomeStack
  • SettingsScreen

[이미지: Tab + Stack 네비게이션 구조]

구조 예시

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeMain" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

<Tab.Navigator>
  <Tab.Screen name="Home" component={HomeStack} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

이렇게 하면

• 탭은 유지되고
• 홈 탭 안에서만 화면이 쌓인다

---

Tab Navigation에서 자주 헷갈리는 포인트

실제로 많이 나오는 질문들이다.

• 탭 이동하면 왜 스택이 초기화되지?
• 뒤로 가기가 이상하게 동작함
• Screen 위치를 어디에 둬야 할지 모르겠음

이럴 때 기준은 하나다.

“이 화면은 탭 레벨인가, 스택 레벨인가?”

• 항상 보이면 → Tab
• 특정 흐름 안에서만 보이면 → Stack

---

아이콘은 언제 추가하나

하단 탭에는
보통 아이콘이 들어간다.

이건 UI 단계에서 자연스럽게 붙이면 된다.

처음에는
텍스트 탭만으로 구조를 익히는 게 더 중요하다.

---

실무 기준으로 정리하면

Tab Navigation은
앱의 뼈대에 해당한다.

• 앱에 들어오자마자 보이는 구조
• 주요 기능으로 바로 이동 가능
• 사용자 경험에 직접적인 영향

그래서
초반에 구조를 잘 잡아두는 게 중요하다.

---

정리

• Tab Navigation은 하단 고정 화면 구조다
• 주요 화면을 탭으로 분리한다
• 실무에서는 Tab + Stack 조합이 기본이다
• 구조 기준만 명확하면 헷갈릴 일이 줄어든다

다음 글에서는
API 연동의 시작점인
fetch / axios를 사용해서
외부 데이터를 가져오는 흐름을 정리해보려고 한다.