React Native Navigation : 구조, 사용법, 트러블슈팅

목차

1. React Navigation의 기본 개념
2. 네비게이터 종류와 특징
3. 네비게이션 구조 설계
4. 타입스크립트 통합
5. 일반적인 사용 패턴
6. 트러블슈팅
7. 베스트 프랙티스

1. React Navigation의 기본 개념

1.1 핵심 컴포넌트

• NavigationContainer: 네비게이션 상태를 관리하는 최상위 컴포넌트
• Navigator: 실제 네비게이션 로직을 처리하는 컴포넌트
• Screen: 네비게이터에 등록되는 각각의 화면

1.2 기본 설정

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 네비게이터 종류와 특징

2.1 Stack Navigator

• 화면을 카드처럼 쌓아가는 방식
• iOS의 기본 네비게이션과 유사한 동작

const Stack = createStackNavigator();

function StackNav() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

2.2 Tab Navigator

• 하단 또는 상단 탭으로 화면 전환
• 주요 섹션 간 이동에 적합

const Tab = createBottomTabNavigator();

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

2.3 Drawer Navigator

• 사이드 메뉴 형태의 네비게이션

const Drawer = createDrawerNavigator();

function DrawerNav() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

3. 네비게이션 구조 설계

3.1 중첩 네비게이션

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

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

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={TabNavigator} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3.2 조건부 네비게이션

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {isLoggedIn ? (
          <Stack.Screen name="Main" component={MainNavigator} />
        ) : (
          <Stack.Screen name="Auth" component={AuthNavigator} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

4. 타입스크립트 통합

4.1 타입 정의

export type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type Props = StackNavigationProp<RootStackParamList, 'Home'>;

4.2 타입 사용

function HomeScreen() {
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();

  return (
    <Button
      onPress={() => navigation.navigate('Profile', { userId: '123' })}
      title="Go to Profile"
    />
  );
}

5. 일반적인 사용 패턴

5.1 화면 이동

// 기본 이동
navigation.navigate('Screen');

// 파라미터와 함께 이동
navigation.navigate('Screen', { id: 123 });

// 스택 초기화하며 이동
navigation.reset({
  index: 0,
  routes: [{ name: 'Screen' }],
});

// 현재 화면 교체
navigation.replace('Screen');

5.2 파라미터 전달 및 사용

// 파라미터 전달
navigation.navigate('Profile', {
  userId: '123',
  name: 'John',
});

// 파라미터 사용
function ProfileScreen() {
  const route = useRoute<RouteProp<ParamList, 'Profile'>>();
  const { userId, name } = route.params;
  
  return <Text>Profile of {name}</Text>;
}

6. 트러블슈팅

6.1 일반적인 문제들

1. 화면이 중복으로 쌓이는 문제

   • navigate 대신 reset 또는 replace 사용

2. 네비게이션 액션이 무시되는 문제

   • 조건부 렌더링 확인
   • 네비게이터 구조 검토

3. 타입 오류

   • 파라미터 리스트 정확히 정의
   • 네비게이션 프롭 타입 올바르게 지정

6.2 해결 방법

// 스택 초기화 예시
navigation.reset({
  index: 0,
  routes: [{ name: 'Home' }],
});

// 조건부 렌더링 처리
useEffect(() => {
  const timeout = setTimeout(() => {
    navigation.navigate('Target');
  }, 100);
  return () => clearTimeout(timeout);
}, []);

7. 베스트 프랙티스

7.1 구조화

• 네비게이터 컴포넌트 분리
• 타입 정의 중앙화
• 일관된 네이밍 컨벤션 사용

7.2 성능 최적화

• 불필요한 리렌더링 방지
• 화면 캐싱 활용
• 메모이제이션 적절히 사용

7.3 보안

• 인증 상태에 따른 네비게이션 제어
• 민감한 정보는 파라미터로 전달하지 않기
• 딥링크 처리 시 검증 로직 추가

결론

React Navigation은 강력하지만 복잡할 수 있는 도구.
올바른 구조 설계와 타입 시스템 활용, 그리고 일반적인 문제들에 대한 이해를 통해 효과적으로 사용할 수 있음.
앱의 네비게이션 구조를 체계적으로 구축해야함.