[React Navigation] navigate할때 Dynamic한 params의 타입 세팅해주기
2021. 9. 25. 09:30ㆍDevelop/Typescript
안녕하세요 😊 케빈입니다 🙏
제가 요즘 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%로 수렴할 수 있고 코드를 처음보는사람이 보더라도 바로 사용할수있을정도로 아름답다고 느꼈습니다.
조금더 할 일이 많아졌지만 그만큼 완성도가 올라가는 작업이라고 생각합니다 :)
그럼 다음 게시글에서 봅시다! 👏
'Develop > Typescript' 카테고리의 다른 글
[타입스크립트] Number 타입 (0) | 2024.07.03 |
---|---|
[타입스크립트] Boolean 타입 (0) | 2024.07.03 |
[타입스크립트] 소개 (0) | 2024.07.03 |
[타입스크립트] 타입스크립트 핸드북 공부를 시작하며 (0) | 2024.06.27 |
[React Navigation] useNavigation에 Typescript 적용하기 🌸 (2) | 2021.09.24 |