LifeSports Application(ReactNative & Nest.js) - 2. Navigation

#1 React Native 설치

React Native설치에 관해서는 https://dev-yakuza.posstree.com/ko/react-native/install-on-windows/ 블로그에 잘 나와있어 링크를 남기도록 하겠습니다.

#2 메인 페이지 구현

src 디렉토리를 만들고 이 곳에 구현할 page, lib, module, styles 디렉토리를 만들도록 하겠습니다. 그리고 메인페이지 구현에 앞서 styles/palette.js라는 파일을 만들어 앞으로 사용할 색상들을 만들어주도록 하겠습니다.

  • styles/palett.js
const palette = {
    red: [
        '#FF0000',
        '#FF3232',
        '#FF4646',
        '#FF5050',
        '#FF5A5A',
        '#FF6347', 
        '#DC143C',
    ],
    blue: [
        '#0000FF',
        '#0000CD',
        '#000080',
        '#00008B',
        '#14148C',
        '#28288C',
        '#2828CD',
        '#191970',
    ],
    white: [
        '#FFFFFF'
    ],
    gray: [
        '#f8f9fa',
        '#f1f3f5',
        '#e9ecef',
        '#dee2e6',
        '#ced4da',
        '#adb5bd',
    ],
    black: [
        '#000000',
        '#282828',
        '#323232',
        '#3c3c3c',
        '#464646',
    ]
} 

export default palette;

색상 파일을 만들었고, client_app/src/pages/로 가도록 하겠습니다. 이 디렉토리는 앞으로 LoginScreen, HomeScreen, PostScreen 등등 다양한 페이지를 작성할 디렉토리입니다. home이라는 디렉토리를 만들어 HomeScreen을 만들어 주도록 하겠습니다. HomeScreen은 로그인 후 사용자가 서비스를 이용할 수 있는 네비게이션들 중 첫번째 화면입니다.

  • pages/home/HomeScreen
import * as React from 'react';
import { StyleSheet, Text, ScrollView } from 'react-native';
import palette from '../../styles/palette';

const HomeScreen = () => {
    return(
        <ScrollView style={ styles.container }>
            <Text>Home Screen</Text>
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: palette.white[0],
    },
});

export default HomeScreen;

코드를 잠깐 보도록 하겠습니다. react native는 react를 기본으로 하고있기 때문에 react라이브러리를 호출해야합니다. 그리고 react native 고유 라이브러리인 StyleSheet는 css를 json형태로 만들어 style옵션에 넣어줄 수 있는 라이브러리입니다. 이제 기본페이지들을 만들어보도록 하겠습니다.

  • pages/auth/LoginScreen
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import palette from '../../styles/palette';

const LoginScreen = () => {
    return(
        <View style={ styles.container }>
            <Text>Login Screen</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: palette.gray[1],
        alignItems: 'center',
        justifyContent: 'center',
    },
});

export default LoginScreen;
  • pages/auth/RegisterScreen
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import palette from '../../styles/palette';

const RegisterScreen = () => {
    return(
        <View style={ styles.container }>
            <Text>Register Screen</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: palette.gray[1],
        alignItems: 'center',
        justifyContent: 'center',
    },
});

export default RegisterScreen;

두 번째 네비게이션 화면인 PostScreen입니다.

  • pages/post/PostScreen
import * as React from 'react';
import { StyleSheet, Text, ScrollView } from 'react-native';
import palette from '../../styles/palette';

const PostScreen = () => {
    return(
        <ScrollView style={ styles.container }>
            <Text>Post Screen</Text>
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: palette.white[0],
    },
});

export default PostScreen;

세 번째 네비게이션 화면인 MapScreen입니다.

  • pages/map/MapScreen
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import palette from '../../styles/palette';

const MapScreen = () => {
    return(
        <View style={ styles.container }>
            <Text>Map Screen</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: palette.gray[1],
        alignItems: 'center',
        justifyContent: 'center',
    },
});

export default MapScreen;

네 번째 네비게이션 화면인 MyPageScreen입니다.

  • pages/user/MyPageScreen
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import palette from '../../styles/palette';

const MyPageScreen = () => {
    return(
        <View style={ styles.container }>
            <Text>MyPage Screen</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: palette.gray[1],
        alignItems: 'center',
        justifyContent: 'center',
    },
});

export default MyPageScreen;

react native는 navigation을 이용해서 페이지 라우팅을 수행할 수 있습니다. 해당 애플리케이션의 화면이 넘어가는 순서를 살펴 보겠습니다.

1) 애플리케이션 구동 시 유저는 로그인 화면을 보게 됩니다.
1-1-1) 회원가입이 되어있다면 아이디와 비밀번호를 누르고 로그인을 수행합니다.
1-1-2) 로그인을 수행하고 메인 화면으로 넘어갑니다.

1-2-1) 회원가입이 되어있지 않다면 회원가입 버튼을 누릅니다.
1-2-2) 회원가입 양식을 작성한 후 회원가입을 수행합니다.
1-2-3) 1-1-1) ~ 1-1-2) 수행

2) 메인화면 하단의 4개의 네비게이션 버튼 (추후 해당 스크린 구현 시 설명)
2-1) HomeScreen
2-2) PostScreen
2-3) MapScreen
2-4) MyPageScreen

생활체육 애플리케이션은 StackNavigation, BottomNavigation 2가지의 네비게이터가 동작하게 됩니다. StackNavigation은 페이지를 쌓아두고 라우팅 기능 수행 시 쌓아두었던 페이지를 꺼내 라우팅하는 기능을 가지고 있고, BottomNavigation은 하단에 4개의 버튼을 만들어 버튼 클릭 시 원하는 페이지로 라우팅하는 기능을 수행합니다. 그러면 이 네비게이션을 가지고 1)을 살펴 보겠습니다.

1) 순서를 보면 크게 3개의 페이지 수행 동작이 보입니다. 로그인 화면 -> 회원가입 화면, 회원가입 화면 -> 로그인 화면, 로그인 화면 -> 메인 화면 와 같은 3개의 수행 동작은 StackNavigation을 이용하여 로그인 화면, 회원가입 화면, 메인 화면을 쌓아두고 라우팅 기능을 수행하면 될 것같습니다. StackNavigation을 설치하도록 하겠습니다.

npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/stack
npm install react-native-gesture-handler
npm install @react-navigation/native

StackNavigation을 설치했으니 코드로 구현하여 화면이 넘어가는 부분을 구현하도록 하겠습니다.

  • src/navigator/MainNavigation
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import LoginScreen from '../pages/auth/LoginScreen';
import RegisterScreen from '../pages/auth/RegisterScreen';
import HomeScreen from '../pages/home/HomeScreen';

const Stack = createStackNavigator();

const StackNavigatior = () => {
    return(
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                    name="SignIn"
                    component={ LoginScreen }
                    options={{
                        headerShown: false,
                    }}
                />
                <Stack.Screen
                    name="Sign Up"
                    component={ RegisterScreen }
                    options={{
                        title: 'SignUp'
                    }}
                />
                <Stack.Screen
                    name="Tab"
                    component={ HomeScreen }
                    options={{
                        headerShown: false,
                    }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default StackNavigatior;

그리고 App.js의 코드를 전부 지우고 다음과 같이 바꾸도록 하겠습니다.

  • App.js
import React from 'react';
import StackNavigatior from './src/navigator/MainNavigation';

const App = () => {
  return(
    <StackNavigatior />
  );
};

export default App;

이렇게 코드를 작성하고 난 후 npm run android로 구동을 하시면 다음과 같은 화면이 나오게 됩니다.

StackNavigation의 첫번째 Stack을 로그인으로 잡게 되어 첫 화면이 로그인 화면으로 나타나는 것이죠. 그러면 이를 이용해서 로그인 화면을 먼저 만들고 로그인 화면에서 회원가입 화면으로의 이동 그리고 로그인 성공 시 이동하게 되는 홈스크린 화면을 다음 포스트에서 구현해보도록 하겠습니다.

참고

구간DP 기본편 POJ2955-Brackets
필터 가능한 주제를 포함하는 TalkJS 채팅 받은 편지함 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage