[React_study] useMatch()

* useMatch()

• 현재 위치를 기준으로 지정된 경로에 대한 일치 데이터를 반환합니다.
• useMatch()의 인자로 url을 넘기어 해당 url과 일치할 경우 url의 정보를 반환하고 일치하기 않을 경우 null을 반환한다.

---

* useMatch() 활용 예시코드

import { useMatch } from 'react-router-dom';

const priceMatch = useMatch("/:coinId/price");
const chartMatch = useMatch("/:coinId/chart");

const Tab = styled.span<{ isActive: boolean }>`
  color: ${(props) => props.isActive ? "white" : "black"};
`;

 <Tabs>
    <Tab isActive={chartMatch !== null}>
      <Link to={`/${coinId}/chart`}>Chart</Link>
    </Tab>
    <Tab isActive={priceMatch !== null}>
      <Link to={`/${coinId}/price`}>Price</Link>
    </Tab>
</Tabs>

• useMatch를 이용해 2개의 url을 인자로 받는다.
• url이 일치할 경우 isActive는 true가 되므로 styled-components의 props에 의해서 white가 된다.
• 해당 기능을 이용해 현재 클릭중인 url의 색상을 변경해 강조해 줄 수 있다.