주제 : Stack Navigator 타입 지정하기

https://reactnavigation.org/docs/typescript

1. Params가 없는 경우 undefined 사용

AuthStackParamList에서 undefined를 사용한 이유는 해당 스크린으로 이동할 때 네비게이션 파라미터를 전달하지 않는다는 것을 명시하기 위함입니다.

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


export type AuthStackParamList = {
  [authNavigations.AUTH_HOME]: undefined;
  [authNavigations.LOGIN]: undefined;
};

const Stack = createStackNavigator<AuthStackParamList>();

2. tackScreenProps의 제네릭 타입

1. 첫 번째 제네릭 타입 파라미터 (AuthStackParamList):
네비게이션 스택의 파라미터 리스트 타입을 지정하는데 여기서는 각 스크린에 전달할 수 있는 파라미터의 타입을 정의합니다.

2. 두 번째 제네릭 타입 파라미터 (typeof authNavigations.AUTH_HOME):
특정 스크린의 이름을 지정하는데 이 이름은 상수화된 값으로, 예를 들어 'AuthHome'과 같이 문자열을 직접 사용할 수도 있지만, 상수를 사용하면 자동 타입 체크의 장점을 누릴 수 있습니다.

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

type AuthHomeScreenProps = StackScreenProps<
  AuthStackParamList,
  typeof authNavigations.AUTH_HOME
>;

function AuthHomeScreen({navigation}: AuthHomeScreenProps) {
  //
}

3. typeof authNavigations.AUTH_HOME 사용 이유

as const를 사용함으로써 authNavigations 객체의 모든 속성들이 리터럴 타입으로 고정됩니다. 즉, AUTH_HOME 속성의 타입은 'AuthHome'이라는 특정 문자열이 됩니다.

타입스크립트가 authNavigations.AUTH_HOME의 값을 알고 있기 때문에, 이를 통해 타입을 지정하면 네비게이터 이름을 변경할 때 자동으로 타입 체크가 가능합니다.

예를 들어, authNavigations.AUTH_HOME의 값을 'AuthHome'에서 'HomeScreen'으로 변경하면, typeof authNavigations.AUTH_HOME를 사용하는 모든 곳에서 자동으로 타입이 업데이트되어 안정성을 확보할 수 있습니다.

cf.

console.log(typeof authNavigations.AUTH_HOME);

을 사용하면 런타임에서는 'string'이 출력됩니다.

그러나 타입스크립트의 타입 시스템에서는 typeof authNavigations.AUTH_HOME이 'AuthHome'이라는 구체적인 문자열 리터럴 타입을 의미합니다.