코드스테이츠 프로젝트(Holyship_03: React Navigation)

React Native Navigation vs React Navigation

React Native에서는 React처럼 Route를 활용해서 화면을 이동시켜주는게 아니라 Navigation을 사용해서 화면을 전환시켜준다.

주로 쓰이는 라이브러리로는 React Native Navigation(RNN) 과 React Navigation(RN) 두 가지가 있다.

• RN은 react native에서 제공하는 js기반 라이브러리, 문서화가 잘되있고 사용성에 강점을 갖는다.

• RNN은 네이티브 기반 라이브러리, 성능이 뛰어나다.

처음 네이티브를 쓰기 때문에 사용성이 뛰어난 RN을 프로젝트에 사용하기로 결정했다.

StackNavigator

StackNavigator는 가장 주로 쓰이는 네비게이터로 웹 브라우져의 a 태그에 해당된다. 화면을 이동시켜주면서 네비게이션의 히스토리 또한 관리해준다.
웹 브라우져와 가장 큰 차이점은 제스쳐나 애니메이션에 의해서 네비게이팅 된다.
createStackNavigator는 리액트 컴포넌트를 리턴 해주는 함수이다. 라우트를 형성해주는 객체와 옵션값을 설정해주는 객체를 받는다.

import Join from './JoinScreen';
import Login from './LoginScreen';

const AuthStack = createStackNavigator(
  {
    Login,
    Join,
  },
  { initialRouteName: 'Login', headerMode: 'none' }
);

StackNavigator를 사용하다보니 로그인이 되었을 경우에도 뒤로 이동하는 경우 히스토리에 남아있던 로그인화면으로 이동하는 문제가 발생했다.

SwitchNavigator

이런 문제를 해결하기 위해 SwitchNavigator가 사용된다.
SwitchNavigator의 경우 하나의 화면을 오직 한번만 보여준다. 기본적으로 뒤로가기를 할 수 없고, 스위치를 해버리면 라우트들이 초기화된다.
Authentication flow에 적합한 네비게이터다. 로그인을 하게되면 인증 관련 화면을 라우터 히스토리에서 삭제하고, 뒤로가기를 눌러도 더이상 인증화면으로 넘어가지 않는다.

const TabNavigator = createBottomTabNavigator(
  {
    Category: CategoryStack,
    Home: HomeStack,
    Chart: ChartStack,
    Mypage: UserStack,
  },
  {
    initialRouteName: 'Home',
    tabBarComponent: BottomNavigationShowcase,
  }
);
  
const Total = createSwitchNavigator(
  {
    Splash,
    App: TabNavigator,
    Auth: AuthStack,
  },
  { initialRouteName: 'Splash' }
);

holyship 프로젝트에서는 createSwitchNavigator를 사용해서 각 StackNavigator들을 Switch 처리를 해줬다.

React Navigation 4.x 공식홈페이지를 참고해보면 아래와 같이 navigate를 활용해서 Switch 처리를 해줄수도 있을것 같다.

const userToken = await AsyncStorage.getItem('userToken');
    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

App Containers

마지막으로, createAppContainer로 상태를 관리하고 최상위 네비게이터를 앱 환경에 연결시키는 것으로 네비게이터 설정을 마무리합니다.

const AppStack = createAppContainer(Total)
export default AppStack;

프로젝트내에서 SwitchNavigator로 로그인 처리기능을 구현한 부분