Typescript환경에서 Route 사용하기

평범하게 App에 라우팅을 구성하면

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import NoteListPage from './pages/NoteListPage';
import HomePage from './pages/HomePage';
import NotePage from './pages/NotePage';

function App() {
  return (
    <Router>
      <Switch>
        <Route path='/' component={HomePage} exact />
        <Route path='/note' component={NoteListPage} exact />
        <Route path='/note/:id' component={NotePage} />
      </Switch>
    </Router>
  );
}

export default App;

대강 이런 모습이 나오는데, 여기 Route컴포넌트의 component prop에 들어간 컴포넌트는 Route가 주는 history, match, location 등의 요소들을 사용할 수 있다.

그냥 자바스크립트로 구성한 리액트 프로젝트에선 해당 컴포넌트의 props로 받아서 쓰면 끝이지만!

타입스크립트에선 타입이 필요합니다. react-router-dom에서 RouteComponentProps를 제공해주니 가져다 쓴다.

import React from 'react';
import { RouteComponentProps } from 'react-router-dom';

function NotePage({ match }: RouteComponentProps) {
  console.log(match);
  return <div>노트 페이지</div>;
}

일단 라우트 경로에 명시한대로 /note/1 경로로 가서 match를 살펴보면

원하는건 얻었다.

저기 내가 쓰려고 하는 id가 params에 들어가 있는걸 볼 수 있다. 그럼 이제 꺼내 쓰면 되겠지 하고 쓰려고 보면,

역시 쉽게 내어주지 않는다(?). 😡

이건 왜냐면, RouteComponentProps제네릭에 타입을 주지 않아서 match 내부가 빈 오브젝트 밖에 없는데 뭘주냐는 이 말과 같다. RouteComponentProps에 커맨드를 누르고 살짝 올려주면 타입이 어떻게 구성되었는지 볼 수 있다..

아, 그러니까 우리가 받을 params 타입을 만들어서 제네릭에 주입해줘야 이놈이 알아먹는다는 것이군.

interface MatchParams {
  id: string;
}

function NotePage({ match }: RouteComponentProps<MatchParams>) {
  const { id } = match.params;
  return (
    <>
      <div>노트 페이지</div>
      <div>{id}</div>
    </>
  );
}

이젠 자동완성도 해줘요. 잘 써먹으면 되겠다.