[React Navigation] navigate할때 Dynamic한 params의 타입 세팅해주기

React Navigation 💪

안녕하세요 😊 케빈입니다 🙏

제가 요즘 Typescript + ReactNative를 사용해서 개인적으로 앱을 만들고있는데요

useNavigation을 Typescript와 사용하면서 dynamic하게 변하는 param들을 screen에 맞게 type을 세팅해주고자할때 어떻게 해야할지 고민하고 적용한 사례를 공유하고자 합니다 👏

먼저 Typescript 쓰기전 코드를 공유하겠습니다

import { useNavigation } from '@react-navigation/native';
import React, { useCallback } from 'react';
import SliderBanner from '../components/SliderBanner';

const SliderBannerContainer = ({ uri, navigateTo, params }) => {
  const navigation = useNavigation();

  const __onBannerPressed = useCallback(() => {
    navigation.navigate(navigateTo, params);
  }, [navigation, navigateTo, params]);

  return <SliderBanner uri={uri} onBannerPressed={__onBannerPressed} />;
};

export default SliderBannerContainer;

이후 Typescript로 바꾼뒤 코드입니다

import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import {
  HomeNavigationTypes,
  HomeStackListScreenTypes,
  HomeStackParamTypes,
  HomeStackTypes,
} from '@typedef/homeTypes';
import React, { useCallback } from 'react';
import SliderBanner from '../components/SliderBanner';

interface Props {
  uri: string;
  navigateTo: HomeStackListScreenTypes;
  params?: HomeStackParamTypes;
}

const SliderBannerContainer = ({ uri, navigateTo, params }: Props) => {
  const navigation = useNavigation<HomeNavigationTypes>();

  const __onBannerPressed = useCallback(() => {
    navigation.navigate(navigateTo, params as HomeStackTypes[typeof navigate]);
  }, [navigation, navigateTo, params]);

  return <SliderBanner uri={uri} onBannerPressed={__onBannerPressed} />;
};

export default SliderBannerContainer;

추가된 코드로는 스크린의 이름들의 타입 그리고 해당 스크린에 맞는 params타입을 추적해주는 부분이 추가되었습니다

개인적으로 느낄때는 한층 강화된 검문..? 이라고 해야할까요 좀더 정돈된 느낌이라고 해야할까요

규칙들이 여러개 더 생겼지만 실수를 0%로 수렴할 수 있고 코드를 처음보는사람이 보더라도 바로 사용할수있을정도로 아름답다고 느꼈습니다.

조금더 할 일이 많아졌지만 그만큼 완성도가 올라가는 작업이라고 생각합니다 :)

그럼 다음 게시글에서 봅시다! 👏