useNavigation의 타입 선언

우리 프로젝트는 자바스크립트에서 타입스크립트로 전환된 기간이 오래되지 않았고,

아직 점진적으로 적용 중이기 때문에 곳곳에 아직 타입이 선언되지 않은 부분이 많다.

useNavigation 역시 마찬가지로 사진과 같이 타입 적용이 되지 않았고, 네비게이션 액션 자체에는 문제가 없지만..! 그러면 타입스크립트를 사용하는 의미가 없으니 타입을 지정하게 되었다. 정확히는 Type Annotation이라고 한다.

여기서 타입스크립트에서 annotation이란?

• 사전적의미의 Annotate: 주석을 달다

• 변수, 함수, 리턴값, 객체 등의 데이터타입을 지정하기 위해 타입 어노테이션 사용 (말 그대로 타입에 주석을 다는 것과 유사)

• 타입 annotated 시에 타입이 검사된다.

navigation은 RootNavigationProp 과 같이 제네릭으로 타입을 넘겨줘야 한다.

const navigation = useNavigation<RootNavigationProp>();

우리 앱은 Drawer 형식의 네비게이션을 사용하지 않고 모두 Stack으로 관리하기 때문에 StackNavigationProp를 사용하고,

각 스크린 및 params의 타입을 정의해둔 RootStackParamList라는 제네릭 타입을 명시한다.

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

type RootStackParamList = {
  // Your custom param type belongs here.
  TestAScreen: {paramA: string};
  TestBScreen: {paramB: boolean, paramBB: string[]};
  TestCScreen: {};
  ...
};

export type RootNavigationProp = StackNavigationProp<RootStackParamList>;

React JSX

Copy

React JSX

Copy

React JSX

Copy

이전에는 각 스크린에 어떤 params가 어떤 타입으로 전달되는지, 필수 params인지 아닌지도 알 수 없었기 때문에 전달받아야 하는 params를 스크린에서 받지 못해 undefined에러가 발생하는 등 이슈가 있었지만, 이와같은 type annotation을 통해 각 스크린으로 navigate할 때 필요한 params를 바로 알 수 있는 장점이 있어 구현에 리스크가 줄어들었다.