React Native 강좌 - 5강 카카오 로그인 실습하기 (3)

이제 실제 화면들을 구성해 볼 시간입니다.

 

먼저 관리를 용이하게 하기 위해 폴더를 여러개 생성합니다! 

저는 src 폴더 안에 파일마다 용도를 나눠서 저장하도록 하겠습니다

 

먼저 프로젝트 폴더에 src 폴더를 생성합니다.

그리고 src 폴더 안에 각각 폴더들을 생성합니다. 

assets 폴더 : 앱에 사용할 이미지 파일등을 저장하는 폴더

component 폴더 : 각종 컴포넌트를 저장하는 폴더

navigation 폴더 : react-navigation 에서 사용할 네비게이터 파일들을 저장

scene : 화면을 표현하는 파일 저장

 

각각 네개의 폴더를 새로 생성합니다.

 

그리고 새로운 파일을 src 폴더에 바로 생성합니다.

 

app.component.tsx

import React from 'react';
import { YellowBox, ImageBackground, StyleSheet, } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {
  light,
  mapping,
} from '@eva-design/eva';
import {
  ApplicationProvider,
  IconRegistry,
} from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { AppNavigator } from './navigation/app.navigator';
import { AppRoute } from './navigation/app-routes';


export default (): React.ReactFragment => {
  

  return (
    <React.Fragment>
      <IconRegistry icons={EvaIconsPack}/>
      <ApplicationProvider
        mapping={mapping}
        theme={light}>
        <SafeAreaProvider>
          <NavigationContainer>
            <AppNavigator initialRouteName={AppRoute.CHECK_LOGIN}/>
          </NavigationContainer>
        </SafeAreaProvider>
      </ApplicationProvider>
    </React.Fragment>
  );
};

const styles = StyleSheet.create({
  appBar: {
    flex: 1,
  },
});

YellowBox.ignoreWarnings([
  'RCTRootView cancelTouches',
]);

 

앱 처음 화면을 나타내기 위한 파일입니다.

그리고 이 파일을 사용하기 위해서는 프로젝트의 설정을 바꿔줘야 합니다.

 

src 폴더 상위폴더로 이동합니다 (프로젝트 폴더입니다)

index.js 파일을 확인하실수 있습니다. 

다음과 같이 수정합니다

/**
 * @format
 */

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import App from './src/app.component';

AppRegistry.registerComponent(appName, () => App);

 

이제 필요한 app-route를 만들 시간입니다.

src/navigation 폴더에 app-routes.ts 파일을 생성합니다. 내용은 다음과 같습니다

export enum AppRoute {
    AUTH = 'Auth',
    SIGN_IN = 'Sign In',
    SIGN_UP = 'Sign Up',
    RESET_PASSWORD = 'Reset Passrord',
    HOME = 'Home',
    ABOUT = 'About',
    CHECK_LOGIN = 'Check Login',
    LOGOUT = 'Logout',
    PROFILE = 'Profile',
}

화면에 따른 변수들을 설정해주며 나중에 화면을 추가할 때 다시 와서 변수들을 추가해줄겁니다.

 

마찬가지로 같은 폴더에 app.navigation.tsx 파일을 생성합니다.

 

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthNavigator } from './auth.navigation';
import { AppRoute } from './app-routes';

const Stack = createStackNavigator();

export const AppNavigator = (props): React.ReactElement => (
  <Stack.Navigator {...props} headerMode='none'>
    <Stack.Screen name={AppRoute.AUTH} component={AuthNavigator}/>
  </Stack.Navigator>
);

 

이제 Stack Navigator 를 사용할 겁니다. 이를 위해 먼저 라이브러리를 설치합니다.

(물론 프로젝트 최상위 폴더에서 명령어를 입력하셔야 합니다.)

npm install @react-navigation/stack

 

Stack Navigator의 자세한 설명은 다음을 참고하시면 됩니다. 

https://reactnavigation.org/docs/stack-navigator

React Navigation

 

이 후 src/navigation 폴더에 auth.navigation.tsx 파일을 생성합니다

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { AppRoute } from './app-routes';
import { 
  LoadingScreen,   
} from '../scenes/auth';

const Stack = createStackNavigator();

export const AuthNavigator = (): React.ReactElement => (
  <Stack.Navigator headerMode='none'>
    <Stack.Screen name={AppRoute.CHECK_LOGIN} component={LoadingScreen}/>
  </Stack.Navigator>
);

먼저 로딩화면을 띄우고 로그인의 유무에 따라 메인화면으로 보낼지 아니면 다른화면으로 보낼지 결정하는 메커니즘으로 앱을 구성하려고 합니다.

 

이곳 까지 천천히 따라오셨으면 다음 포스트를 확인하시면 실제 화면을 구성하는 단계가 시작됩니다.