[React Native] ② Navigation 설정 및 프로젝트 구조 잡기

 

 

 

React Navigation

 

React Native(이하 RN)에서 네비게이션을 구현하는데 사용되는 많은 라이브러리들이 존재한다.

 

그 중 대표적인 것이 React Navigation이다.

 

난 이것을 사용해 지난 포스팅에 생성한 RN 프로젝트에 적용할 것이다.

 

[React Native] React Native 설치 (feat. expo)

 

 

React Navigation은 무려 공식 문서도 제공한다.

React Navigation | React Navigation

 

이제 React Navigation를 적용해보자

 

일단 패키지를 설치한다.

npm install @react-navigation/native

npm install @react-navigation/stack

 

이제 이 네비게이션을 바탕으로 App.tsx를 수정해 보자

 

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as pages from './src'

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer initialRouteName="Landing">
      <Stack.Navigator>
        <Stack.Screen name="Landing" component={pages.Landing} options={{ headerShown:false }} />
        <Stack.Screen name="Login" component={pages.Login} options={{ headerShown:false }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 

위와 같이 앱의 새로운 화면이 생길때마다 그 화면으로 갈수 있는 네비게이션을 등록하고 화면을 개발할 것이다.

 

options={{ headerShown:false }} 이것은 Navigator를 사용하면 디폴트로 나오는 위 네비게이션 해더를 없애는 옵션이다.

 

매우 촌스럽게 생기고 요즘 앱에 많이 없는 것이 빼주도록 하겠다.

 

initialRouteName="Landing"은 앱이 처음 실행될때 첫 화면으로 무엇을 할지를 설정해 주는 옵션이다.

 

 

import * as pages from './src' 이 import문으로 인해 src밑에 있는 페이지들을 모두 한번에 가져오는 구조가 가능하다.

 

 

일단 src를 만들고 각 기능별로 폴더 구조를 나눠봤다. 지금은 편의상 로그인과 비즈 폴더만 만들었다.

 

그리고 src 밑에 index.ts 파일을 만들고

 

import Landing from './login/Landing'

import Login from './login/Login'


export{

    Landing,
    
    Login
    
}

 

src 밑에 오는 페이지들을 export 해줬다.

 

 

이것으로 기본적인 네비게이션 구조와 프로젝트 구조를 잡았다.

 

이를 바탕으로 앱 만들때 기본 프로젝트로 바로 시작할 수 있는 base App을 계속 완성해 볼 생각이다.

 

 

다음 포스팅때는 디자인 요소를 책임질 React Native UI Library를 설치하고 기본적인 디자인 구조를 잡아보겠다.