Typescript) React Native에 Typescript 적용하기 - 3

타입스크립트가 적용된 리액트 네이티브 프로젝트 만들기 실습 3번째

---

 

useState 사용하기

Generic을 사용하여 상태의 타입을 지정해야 함.

예시)

function MessageFrom() {
  const [text, setText] = useState<string>('');
  return (
    <View>
      <TextInput value={text} onChangeText={setText} />
    </View>
  );
}

---

 

useRef 사용하기

마찬가지로 Generic을 이용해서 선언하여 사용함

예시)

function MessageForm() {
  const nextId = useRef<number>(1);
  
  const onPress = () => {
    setLastMessage({
      id: nextId.curent,
      message: text,
      date: new Date(),
    });
    setText('');
    nextId.current += 1;
  };
  (...)

---

 

Context API 사용하기

예시)

import React, {createContext, useContext, useState} from 'react';

interface User {
  id: number;
  username: string;
}

interface AuthContextValue {
  user: User | null;
  setUser(user: User): void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

export function AuthContextProvider({children}: {children: React.ReactNode}) {
  const [user, setUser] = useState<User | null>(null);

  return (
    <AuthContext.Provider value={{user, setUser}}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const auth = useContext(AuthContext);
  // auth의 유효성을 검사해주어야, `useAuth`의 반환값 타입이 AuthContextValue로 됨
  if (!auth) {
    throw new Error('AuthContextProvider is not used'); // throw 를 하여 null 타입 제외
  }
  return auth;
}

AuthContext.Provider 사용하지 않으면 기본값이 null이므로 AuthContextValue | null을 Generic으로 설정함.

Hook 만들 때 유효성 검사를 해줘야 나중에 Hook을 사용할 때 유효성 검사 처리를 안해줄 수 있게 됨.

---

 

react-navigations 사용하기

타입스크립트에서 네이티브 스택 내비게이션 사용할 때에는 어떤 화면에 어떤 파라미터가 필요한지 정의하는 StackPramList 타입 정의하고 NavigationProp으로 재정 필요.

import React from 'react';
import { Button, Text, View } from 'react-native';
import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack';
import { useNavigation, RouteProp, useRoute } from '@react-navigation/native';

type RootStackParamList = {
  MainTab: undefined;
  Detail: {
    id: number;
  };
};

export type RootStackNavigationProp =
  NativeStackNavigationProp<RootStackParamList>;

const Stack = createNativeStackNavigator<RootStackParamList>();

function HomeScreen() {
  const navigation = useNavigation<RootStackNavigationProp>();
  const onPress = () => {
    navigation.navigate('Detail', {id: 1});
  };
  return (
    <View>
      <Text>Home</Text>
      <Button title="Open Detail" onPress={onPress} />
    </View>
  );
}

type DetailScreenRouteProp = RouteProp<RootStackParamList, 'Detail'>;
function DetailScreen() {
  const { params } = useRoute<DetailScreenRouteProp>();
  return (
    <View>
      <Text>Detail {params.id}</Text>
    </View>
  );
}

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen component={MainTab} name='MainTab' options={{
        headerShown: false,
      }} />
      <Stack.Screen component={DetailScreen} name="Detail" />
    </Stack.Navigator>
  );
}

이를 통해 특정 화면으로 navigate 할 때 라우트 파라미터의 타입 검증이 가능

위 예시에서처럼 useRoute를 사용하려면 RouteProp 함수를 사용하여 type을 선언하고 화면에서 사용하면 됨

---

 

탭 네이게이션 사용하기

BottomTabNavigationProp으로 파라메터 만들고 createBottomTabNavigator 사용해서 탭 정의함.

상위 탭 네비게이션을 사용하기 위해서는 CompositeNavigationProp을 사용해서 NavigationProp을 합쳐야 함.
그리고 NavigationProp 함수를 export 하여 주고 받아서 상호간 호출해야 함.

기본적인 흐름)
PramList 타입 정의 => NavigationProp 타입 정의 => createNavigator<ParamList> => useNavigation<NavigationProp>
createNavigator 선언한 변수는 컴포넌트로 사용, useNavigation 선언한 변수는 내부 로직에 사용.

예시)

import React from 'react';
import {
	BottomTabNavigationProp,
	createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
import {Button, Text, View} from 'react-native';
import {
  CompositeNavigationProp,
  NavigatorScreenParams,
  useNavigation,
} from '@react-navigation/native';
import {RootStackNavigationProp} from './RootStack';

type MainTabParamList = {
	Home: undefined,
	Account: undefined,
};
export type MainTabNavigationProp = CompositeNavigationProp<
  RootStackNavigationProp,
  BottomTabNavigationProp<MainTabParamList>
>;
export type MainTabNavigationScreenParams =
  NavigatorScreenParams<MainTabParamList>;

const Tab = createBottomTabNavigator<MainTabParamList>();

function HomeScreen() {
  const navigation = useNavigation<MainTabNavigationProp>();
  const onPress = () => {
    navigation.navigate('Detail', {id: 1});
  };
  return (
    <View>
      <Text>Home</Text>
      <Button title="Open Detail" onPress={onPress} />
    </View>
  );
}

function AccountScreen() {
  return (
    <View>
      <Text>Account</Text>
    </View>
  );
}

function MainTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>
  );
}

export default MainTab;