타입스크립트에서 useParams 사용하기

useParams를 사용하기 전 라우팅에 대해 간단히 알아보자

라우팅

라우팅이란 사용자가 요청한 URL에 알맞은 페이지를 보여주는 것을 의미힌다.

useParams

react-router-dom에서 제공하는 기능 중 하나로 파라미터 값을 URL을 가져와 넘겨받을 페이지에서 사용할 수 있도록 해주는 역할을 한다.

쇼핑 플랫폼을 예로 들어보면 여러 제품이 있을 것이고 각 제품당 고유 id값이 있을 것이다.

useParmas를 사용해 제품의 id를 url로 전달해 상세정보 페이지에서 id에 해당하는 제품 정보만을 볼 수 있는 것이다.

현재 진행중인 비트코인 시세 조회 프로젝트로 예시 코드를 살펴보자.

라우팅을 구현할 페이지 중 세부정보를 조회하고자 하는 페이지에는 path에 :id 형식으로 특정 값을 넣어주면 된다.

예시로 작성한 id는 객체의 key 값으로 작성자 임의로 작성할 수 있다.

아래 이미지처럼 특정 id를 가진 페이지로 이동했을때 url 부분이 변경되는 것을 확인할 수 있다.

• Router.tsx

const Router = () => {
  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/:coinId" element={<Coin />} />
        </Routes>
    </BrowserRouter>
  )
}

• Coin.tsx

import { useParams } from "react-router-dom";

const Coin = () => {
  	const {coinId} = useParams();

    console.log(coinId);
}

useParams는 Route path 부분과 일치하는 키-값 객체를 반환한다.

넘겨받은 url 파라미터를 사용하고자 한다면 구조분해할당 문법을 사용하면 되는 것이다.

useParmas() with typescript

현재 사용하고 있는 라우터 v6를 사용하고 있기에 useParams()의 타입이 string | undefined라고 자동으로 예상을 해준다.

이전 버전을 사용하고 있을 경우 props의 타입을 지정해주는 것과 같이 진행해주면 된다.

이렇게 되면 react-query 사용 시 useQuery의 인자 부분에 string | undefined 형식의 인자를 할당할 수 없다는 오류 문구를 보게 된다.

이를 방지하기 위해 타입을 지정해주면 된다.

다만 인터페이스와 타입의 차이점이 거의 없다고 알고 있는데 인터페이스로 타입을 지정하니 오류가 발생한다.

이 점에 대해서는 더 알아봐야겠다.

type ParamsType {
	coinId : string
};

const {coinId} = useParams() as ParamsType;

참고

리액트 라우터 공식문서