맛집 앱 만들기 프로젝트 Part4 상수화와 navigation 고도화

반복되는 값과 변경되지 않는 변수들을 상수화하기위해 상수 파일을 만든다

[matzip/front/src/constants/navigations.ts] 파일을 작성한다

authNavigations는 각 스크린들의 네임을 매번 호출하기때문에 따로 상수화를 해주고 export로 외부에서 가져올 수 있도록하였다

나중에 버튼 색상등 반복되어 사용되는 고정 변수들은 해당 파일에 선언하려고한다

const authNavigations = {
  AUTH_HOME: 'AuthHome',
  LOGIN: 'Login',
} as const;

export {authNavigations};

상수화 사용 및 타입지정으로 AuthStackNavigator 코드 작성

[matzip/front/src/navigations/stack/AuthStackNavigator.tsx] 파일을 작성한다

먼저 AuthStackNavigator.tsx파일은 네비게이션 라우팅 기능을 수행하는 파일로 어떤 페이지로 이동할때 제일 먼저 거쳐가는 곳이다

기존 내용에서 변경 부분을 확인해보자

• 6번째 줄에 상수화를 했던 authNavigations를 import해준다
• 8번째 줄에 해당 네비게이터에 들어오는 파라미터 (로그인, 회원가입등)를 타입으로 지정하여 개발자 실수를 줄이기위해 작성하였다 export한 이유는 다른 스크린에서도 해당 타입으로 검사후 전달하기 위해서 사용
• 12번째 줄에 제네릭 파라미터로 타입을 위에 8번째 줄에서 작성한 type검사를 진행하여 받는다
• 17, 21번째 줄 각각 네비게이터에서 관리하고있는 스크린 페이지들의 이름을 상수화로 작성하였다 name={authNavigations.HOME,authNavigations.LOGIN}

import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import {StyleSheet} from 'react-native';
import AuthHomeScreen from '../screens/AuthHomeScreen';
import LoginScreen from '../screens/LoginScreen';
import {authNavigations} from '../constants';

export type AuthStackParamList = {
  [authNavigations.AUTH_HOME]: undefined;
  [authNavigations.LOGIN]: undefined;
};
const Stack = createStackNavigator<AuthStackParamList>();

function AuthStackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name={authNavigations.AUTH_HOME}
        component={AuthHomeScreen}
      />
      <Stack.Screen name={authNavigations.LOGIN} component={LoginScreen} />
    </Stack.Navigator>
  );
}

const styles = StyleSheet.create({});

export default AuthStackNavigator;

AuthHomeScreen 파일 코드 작성

네비게이터의 관리받고있는 사용자 최초화면 AuthHomeScreen을 수정하도록하자

• 1번째 줄 Stack의 Screen으로 렌더링되는 컴포넌트는 자동으로 navigation props와 route props를 주입받는다
• 2번째 줄 상수화시킨 파일을 불러오자
• 6번째 줄 위에서 네비게이터에 전달되는 파라미터를 제네릭 파라미터로 타입검사를하게끔 코드를 작성하였기 때문에 해당 AuthHomeScreen 스크린 파일에서도 타입을 하나 만들고 네비게이터에서 만들어둔 타입을 그대로 받아서 사용하자
• 7번째 줄 AuthHomeScreen 파라미터의 값 타입을 6번째 줄에서 만든 타입으로 검사하도록하자
• 14번째 줄 로그인버튼을 눌렀을때 네비게이션으로 전달되는 파라미터를 위에 2번째줄에서 상수화한 authNavigations.LOGIN 를 사용하자

import {StackScreenProps} from '@react-navigation/stack';
import {authNavigations} from '../constants';
import React from 'react';
import {Button, SafeAreaView, StyleSheet, View} from 'react-native';
import {AuthStackParamList} from '../navigation/AuthStackNavigator';

type AuthHomeScreenProps = StackScreenProps<AuthStackParamList>;
function AuthHomeScreen({navigation}: AuthHomeScreenProps) {
  return (
    <SafeAreaView>
      <View>
        <Button
          title="로그인화면으로 이동"
          onPress={() => navigation.navigate(authNavigations.LOGIN)}></Button>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({});

export default AuthHomeScreen;