[React - 14] useMatch

useMatch는 React Router v6 이후 버전에서 제공하는 hook입니다. 

이 hook을 사용하면 현재 위치가 주어진 경로와 일치하는지 판별할 수 있습니다. 

만약 일치한다면 match 객체를 반환하고, 그렇지 않으면 null을 반환합니다.

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

function NavigationLink({ to, children }) {
  let match = useMatch(to);

  return (
    <div>
      {match ? <span>{children}</span> : <a href={to}>{children}</a>}
    </div>
  );
}

이 예시에서 NavigationLink 컴포넌트는 주어진 to 경로와 현재 위치가 일치하는 경우 

아이템을 텍스트(span)로 표시하고, 일치하지 않는 경우 링크(a)로 표시합니다.

 

useMatch는 현재 경로와 주어진 경로를 비교하는데 유용하여, 

예를 들면 내비게이션 메뉴에서 현재 선택된 아이템을 강조 표시하는 경우와 같이 

특정 UI 상태를 조절하는 데 사용될 수 있습니다.

---

useMatch 출력값(객체)

1. path: 패턴 문자열입니다. 예: "/users/:id"

2. pathname: 현재 위치의 경로 이름입니다.

3. params: 경로의 동적 세그먼트에 매핑된 파라미터 객체입니다. 

예를 들어, 경로가 "/users/:id"이고 현재 URL이 "/users/123"인 경우 params는 { id: '123' }가 됩니다.

4. pattern: 주어진 패턴을 구문 분석한 결과입니다. 이 객체에는 몇 가지 속성이 포함됩니다.

• pathname: 주어진 패턴 문자열입니다. 이것은 path 속성과 동일합니다.
• pattern: 주어진 패턴의 토큰화 된 배열입니다.
• paramNames: 경로의 동적 세그먼트 이름의 배열입니다.
• startsWith: 패턴이 슬래시(/)로 시작하는지 여부입니다.

5. route: 현재 라우트의 RouteObject입니다.

 

useMatch의 출력값을 console.log()로 나타낸 형태