문제 상황

React에서 react-router-dom 라이브러리를 사용하여 Link 태그에 props를 전달하는 일이 가끔 있다.
Typescript와 React를 함께 쓸 때 예전 방법 그대로 작성했더니 오류가 발생했다.
해결방법을 알아보자!

시도한 것

Typescript에서는 props를 넘겨 줄 때나 기타 등등의 상황에서 타입을 명시해야한다.
그래서 필자는 interface를 사용하여 useLocation()으로 받아오는 prop의 타입을 정의해봤다.

// Link 태그를 사용한 페이지
<Link
	to={`/league/${pathname}`}
	state={{ logo: test?.league.logo }}
>
// ... //
</Link>

// Link 태그를 통해 이동하게 될 페이지
interface StateType {
  logo: string;
}

function LeaguePage() {
  const location = useLocation<StateType>();  // ts 2558 에러 발생!

  console.log(loaction.state.logo);
 	
  // ... //
}

하지만, 에러가 발생한다! ts 2558 에러가 발생했다.

해결 방법

타입을 선언해주는 것은 맞는 방법이었다!
방식이 조금 달랐던 것 같다.

// Link 태그를 통해 이동하게 될 페이지
function LeaguePage() {
  const location = useLocation();

  const state = location.state as { logo: string };
  
  console.log(state.logo);

  // ... //
}

interface를 통해 Link의 state 타입을 선언했던 것을 지우고, 위와 같은 코드를 작성했다.
이제 state에 넣어서 전달했던 props가 제대로 보인다!

interface를 사용하는 방법도 있다.

// Link 태그를 통해 이동하게 될 페이지
interface PropsType {
  logo: string;
}

function LeaguePage() {
  const location = useLocation();

  const state = location.state as PropsType;
  
  console.log(state.logo);

  // ... //
}

필자는 interface를 따로 만들어두는 것을 좋아해서 후자의 방법을 많이 사용할 것 같다!

참고 자료

참고 자료 1
참고 자료 2