[#React-Typescript, #useNavigate Interface, NavigateFunction, #useNavigate타입]

목표

• *.ts 파일에서 navigate의 타입을 any로 사용하지 않는다
• navigate의 타입은 인터페이스 NavigateFunction를 import해 사용하자

import { NavigateFunction } from 'react-router-dom';

참고

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: {
      replace?: boolean;
      state?: any;
      relative?: RelativeRoutingType;
    }
  ): void;
  (delta: number): void;
}

출처 : https://ultimatecourses.com/blog/programmatically-navigate-react-router

1.여는 글

[ Something.tsx ]

import {useNavigate} from 'react-router-dom'
const navigate = useNavigate();

리액트에서 라우팅을 할 경우, useNavigate를 import 후, 변수 navigate에 할당해 사용한다.

확장자가 *.tsx일 경우, 위와 같은 코드로 리액트 훅(use**) 사용한다

반면에,

[ Something.ts ]

*.ts 파일에 위 코드를 입력하면 다음과 같은 에러를 볼 수 있다.

React Hook "useNavigate" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.

2.결론

navigate (타입) 참조값을 함수에서 사용할 경우, 타입스크립트는 해당하는 타입을 요구한다, 이때, import { NavigateFunction } from 'react-router-dom'; 을 통해서 navigate 변수의 타입을 정의하자!

3.(예시) 코드 구조

A.tsx : useNavigate의 참조값을 함수(deleteItem)의 매개변수(navigate)로 전달

B.ts : 함수(deleteItem)에서 받은 useNavigate의 참조값을 받아 사용함

A.tsx

import {  useNavigate } from 'react-router-dom';
...중략...
const navigate = useNavigate();
...중략...
<button onClick={() => deleteItem(hotel.id, navigate)}>Delete Item</button> 

함수 deleteItem의 매개변수 navigate로 useNavigate()의 참조값이 전달된다.

B.ts (이전) => navigate: any

export const deleteItem = async (
  id: string | undefined,
  navigate: any // <======== 여기!!!!
) => {
  const document = doc(firestore, `items/${id}`);
  await deleteDoc(document);
  navigate('/');
};
};

함수 deleteItem에서 useNavigate()의 참조값을 받을 때, 매개변수 navigate의 타입을 몰라 any를 적용해 사용했다.

B.ts (이후) => navigate: NavigateFunction

import { NavigateFunction } from 'react-router-dom';

...중략....

export const deleteItem = async (
  id: string | undefined,
  navigate: NavigateFunction // <======== 여기!!!!
) => {
  const document = doc(firestore, `items/${id}`);
  await deleteDoc(document);
  navigate('/');
};
};

'NavigateFunction' 라는 인터페이스를 navigate의 타입으로 사용한다.