🧭 46. React Native Bottom Tab 구조의 상태 관리 전략 — 전환 초기화 방지와 상태 공유까지

---

React Native 앱에서
하단 탭 네비게이션(Bottom Tabs) 구조는 거의 기본이라고 할 수 있다.

하지만 탭 간 이동을 하다 보면 이런 문제가 생긴다:

• 탭을 이동했다 돌아오면 화면이 다시 렌더링됨
• 스크롤 위치가 초기화됨
• 탭 간 공통 상태를 어떻게 관리할지 애매함

이번 글은 이런 문제를 해결하기 위한
React Navigation의 구조 + 상태관리 조합 전략을 다룬다.

---

✅ Bottom Tab 기본 구조

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

const Tab = createBottomTabNavigator();

function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

✅ 하단 탭 구조 기본 구현
✅ 각 탭은 독립된 스택처럼 작동

---

❗ 탭 이동 시 상태 초기화 문제

기본적으로 각 탭은 렌더링 상태를 메모리에 유지하지만,
간혹 다음과 같은 상황에서 화면이 초기화된다:

• unmountOnBlur: true 설정 시
• useEffect의 의존성 처리 미흡
• 상태 저장을 로컬 state로만 처리할 경우

---

✅ 상태 유지 전략 1: Zustand / Context 사용

공통된 상태는 Zustand나 Context로 분리해서 관리하면
탭 간 이동과 관계없이 상태가 유지된다.

const useFeedStore = create((set) => ({
  posts: [],
  setPosts: (posts) => set({ posts }),
}));

• 탭 이동해도 상태 유지
• 다른 탭에서도 읽고 쓰기 가능

---

✅ 상태 유지 전략 2: unmountOnBlur: false

<Tab.Screen
  name="Feed"
  component={FeedScreen}
  options={{ unmountOnBlur: false }}
/>

• 해당 탭이 화면에서 사라져도 언마운트되지 않음
• 상태 유지와 UX 일관성 확보

---

🔁 탭 안에 Stack이 있는 구조 (중첩 구조)

function FeedStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="FeedList" component={FeedList} />
      <Stack.Screen name="FeedDetail" component={FeedDetail} />
    </Stack.Navigator>
  );
}

<Tab.Navigator>
  <Tab.Screen name="Feed" component={FeedStack} />
</Tab.Navigator>

✅ 실무에서는 거의 필수적인 구조
✅ 탭마다 독립적인 화면 흐름 구성 가능

---

💡 실전 팁

상황	해결 방법
탭 이동 시 화면 초기화됨	unmountOnBlur: false
탭 간 상태 공유	Zustand, Context
탭 안의 상세 페이지 구성	Stack 중첩
상태 초기화가 필요할 땐?	useFocusEffect()로 의도적 초기화 처리

---

🧠 내가 느낀 점

처음에는 탭 화면이 다시 렌더링되는 걸 보고 “버그인가?” 싶었는데,
설정 하나로 유지 여부가 달라진다는 걸 알고 나선
의도적으로 초기화할 때와 유지할 때를 분리해서 설계하게 됐다.

지금은 Zustand로 탭 전역 상태를 관리하고,
unmountOnBlur로 화면 초기화 여부를 제어하면서
UX와 퍼포먼스 둘 다 챙기고 있다.

---

🧭 “탭 간 이동은 단순한 UI가 아니라, 사용자 흐름의 중심이다.”

---