[React][TypeScrpit] react-router-dom v6 - useMatch (v5. useRouteMatch)

useMatch란?

특정한 URL에 있는지의 여부를 알려준다. 

https://reactrouter.com/en/main/hooks/use-match

useMatch v6.8.0

사용법은 아래와 같다

https://reach.tech/router/api/useMatch

Reach Router: Next Generation Routing for React

import { Link, useMatch, Outlet } from "react-router-dom";

const App = () => {
  const priceMatch = useMatch("/:coinId/price");
  const chartMatch = useMatch("/:coinId/chart");
  const Tabs = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 25px 0px;
  gap: 10px;
`;

const Tab = styled.span<{ isActive: boolean }>`
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 7px 0px;
  border-radius: 10px;
  color: ${(props) =>
    props.isActive ? props.theme.accentColor : props.theme.textColor};
  a {
    display: block;
  }
`;
  
  return(
      <Tabs>
        <Tab isActive={chartMatch !== null}>
          <Link to={`/${coinId}/chart`}>Chart</Link>
        </Tab>
        <Tab isActive={priceMatch !== null}>
          <Link to={`/${coinId}/price`}>Price</Link>
        </Tab>
      </Tabs>
      <Outlet />
  );
)

이 HOOK은 한 페이지 내에서 여러가지 탭에 대응할 때 사용하게 될 것 같은데

위의 코드의 결과화면을 봐보면

이런식 현재 나의 URL이 어떤 것인지에 따라서 링크를 생성해주는 것 인데

만약 price로 접근하였다면 chartMatch의 값은 null로 되면서 acitve를 해제하고

chart로 접근하였다면 그 반대의 로직이 되는 것 이다.