React Navigation 7의 Static API

 

• Static API 도입 배경
  • 기존 Dynamic API는 TypeScript와 딥링킹 설정을 수동으로 관리해야 해서 번거롭고 오류가 발생하기 쉬움.
  • Static API는 더 단순한 방식으로 네비게이션 구조를 정의할 수 있어 코드베이스를 간결하게 유지 가능.
• Static API 기본 구조
  • createStackNavigator에서 screens 속성으로 화면을 정의.
  • createStaticNavigation을 호출해 네비게이션 컴포넌트를 생성.
  • NavigationContainer와 유사하게 동작하며 대부분의 props를 지원.
  • Dynamic API (기존 방식)

    import { createStackNavigator } from '@react-navigation/stack';
    
    const Stack = createStackNavigator();
    
    function RootStack() {
      return (
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Profile" component={Profile} />
          <Stack.Screen name="Settings" component={Settings} />
        </Stack.Navigator>
      );
    }
    

  • Static API (새로운 방식)

    import { createStackNavigator, createStaticNavigation } from '@react-navigation/native-stack';
    
    const RootStack = createStackNavigator({
      screens: {
        Home: { screen: Home },
        Profile: { screen: Profile },
        Settings: { screen: Settings },
      },
    });
    
    const Navigation = createStaticNavigation(RootStack);
    
    function App() {
      return <Navigation />;
    }

 

• TypeScript 지원
  • StaticParamList 타입을 통해 루트 네비게이터에서 타입을 자동 추론.
  • RootParamList 인터페이스를 확장해 타입 안정성을 확보.
• Deep Linking 개선
  • 딥링킹 설정을 화면 정의와 함께 작성 가능.
  • enabled: 'auto' 옵션으로 화면 이름 기반 경로 자동 생성.
    

    const RootStack = createStackNavigator({
      screens: {
        // Generated path: ''
        Home: {
          screen: HomeScreen,
        },
        // Generated path: 'profile'
        Profile: {
          screen: ProfileScreen,
        },
        // Generated path: 'news-feed'
        NewsFeed: {
          screen: NewsFeedScreen,
        },
      },
    });
    
    const Navigation = createStaticNavigation(RootStack);
    
    function App() {
      return (
        <Navigation
          linking={{
            prefixes: ['https://example.com', 'example://'],
            enabled: 'auto',
          }}
        >
          <Navigation />
        </Navigation>
      );
    }

    
    
• 인증 흐름 (Authentication Flow)
  • if 속성을 사용해 로그인 여부에 따라 화면을 조건부로 포함.
  • 예: useIsSignedIn, useIsSignedOut 훅을 활용.
    

    const RootStack = createNativeStackNavigator({
      screens: {
        Home: {
          if: useIsSignedIn,
          screen: HomeScreen,
        },
        SignIn: {
          if: useIsSignedOut,
          screen: SignInScreen,
        },
      },
    });

• 호환성 (Interoperability)
  • Static API와 Dynamic API를 혼합 사용 가능.
  • 점진적 마이그레이션을 지원하여 유연성 제공.