react-router-dom v6 generic 미지원

요새 리액트를 열심히 공부하고 있는데 react-router-dom v6를 사용하다가 상당히 아쉬운 이슈를 발견했다.

예시코드는 아래와 같다.

// react-router-dom v5
interface RouteState {
  name: string;
}

function Coin() {
  const { state } = useLocation<RouteState>();

// react-router-dom v6
interface RouteState {
  state: {
    coin: ICoin;
  };
}

function Coin() {
  const { state } = useLocation() as RouteState;

사실 리액트나 타입스크립트를 깊게 알지 못해서 이게 왜 불편하고 문제인지 명확하게 인지하고 있진 못하지만, 보통 다른 hook들을 사용할때 generic을 이용해서 타입을 알려주다보니 상당히 어색하게 느껴진다 -_-;

이유를 찾아보니 링크가 있었다.

대략적인 이유로는 다른 방법으로 사용할 수 있고, 실용적인 측면에서 generic을 강요하는게 되다보니 받아들이지 않겠다. 정도의 뉘앙스인 것 같다.

당연히 밑에 답글들은 난리다.

가장 마지막 댓글이 압권이었다. "왜 거부된건지 모르겠다.  이 기능(useLocation)을 쓰기 위해 .d.ts 파일을 추가해야만하는건 상당히 무례하다." 정도인 것 같다.

사실 맞는 말이긴하다. 실제로 useLocation을 따라가보면 아래와 같다.

unknown 타입... 차라리 이럴거면 any를 주는게 낫지 않았을까..

아마 d.ts 파일이 뭔지 모르는 분들이 계실 것 같은데 d가 붙으면 declaration(선언)에 이용된다는 뜻이다.

보통 styled-component에서 DefaultTheme을 사용할때 많이 봤을 것이다.

export interface DefaultTheme {}

DefaultTheme을 따라가보면 아예 타입이 선언이 되어있지 않다. 이건 상식적으로 이해가 된다. 왜냐면 사용자가 어떤걸 사용하고 싶은지에 따라 달라질 수 있으니 declaration merging(선언 병합)을 이용해서 쓰라는 것이니까.

보통 styled.d.ts로 파일을 만들어서 쓰는 것 같다.(나만 그럴수도 있다.)

근데 개인적인 생각으로는 useLocation은 d.ts를 만드는거보단 as를 붙이는게 더 나은 것 같기도하다...