[React Native] Typescript에서 Navigation 적용하기

 화면 전환에 대해 공부를 하면서 Typescript 상에서의 네비게이터 설정이 생각보다 복잡하여 정리가 필요하다. 가장 먼저 Navigation을 사용하기 위하여 의존성 라이브러리 설치가 먼저 필요하다.

yarn add react-native-gesture-handler react-navigation 
yarn add react-native-safe-area-context react-native-screens 
yarn add @react-native-community/masked-view
yarn add @react-navigation/native @react-navigation/stack

Typescript를 사용하기 전에는 JavaScript로만 구현을 했기 때문에 타입형에 대한 부분이 추가될 필요가 없어서 비교적 구현이 간단했다. 어쩌면 Typescript를 적용하면서 에러가 좀 꼬인 듯도 하다.

https://reactnavigation.org/docs/typescript/ 

 문서에는 위와 같이 명시되어 있다. Navigation을 정의해줄 때에도 파라미터에 대한 타입형이 필요하고 이로 인해 이전 화면에서 업데이트 된 변수를 넘겨줄 때에도 타입형과 함께 넘겨줘야 한다. 

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

import {
  profileView,
  editProfileView,
} from '../screens';

const Stack = createStackNavigator();

const ProfileStack: React.FunctionComponent = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Profile"
        component={profileView}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="EditProfile"
        component={editProfileView}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

export default ProfileStack;

이를 바탕으로 위와 같이 기존에 작성되었던 코드를 변경했다.

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

import {
  profileView,
  editProfileView,
  // modalScreen,
} from '../screens';

export enum ProfileScreens {
  Profile = 'Profile',
  EditProfile = 'EditProfile',
}

export type ProfileStackParamList = {
  Profile: undefined;
  EditProfile: undefined;
};

const Stack = createStackNavigator<ProfileStackParamList>();

const ProfileStack: React.FunctionComponent = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name={ProfileScreens.Profile}
        component={profileView}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name={ProfileScreens.EditProfile}
        component={editProfileView}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

export default ProfileStack;

지금 당장은 enum을 사용해서 Screen에 대한 세부적인 뷰들을 미리 열거한 다음 선언하는 방식이 조금 굳이..? 싶은 느낌인데 언젠가는 이 부분에 대한 효율성을 깨달으리라..

변경된 부분은 다음과 같다.

1. enum을 통한 스크린 선언

export enum ProfileScreens {
  Profile = 'Profile',
  EditProfile = 'EditProfile',
}

2. 스크린마다 필요한 파라미터 선언

export type ProfileStackParamList = {
  Profile: undefined; //필요한 파라미터가 없는 상태
  EditProfile: undefined;
};

3. name에 string을 enum 형식으로 교체

const ProfileStack: React.FunctionComponent = ({navigation}) => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name={ProfileScreens.Profile}  //<-- 이 부분!
        component={profileView}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name={ProfileScreens.EditProfile} //<-- 이 부분!
        component={editProfileView} 
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};