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를 사용해서
외부 데이터를 가져오는 흐름을 정리해보려고 한다.