useMatch vs window.location.href.includes()

☀️

인터넷 강의를 보다가 문득 궁금해져서 비교해봤다.
아래는 문제의 코드

const chartMatch = useMatch(`/:coinId/chart`);
...

// <Tab isActive={!!chartMatch}>
<Tab isActive={window.location.href.includes("chart")}>
  <Link to="chart">chart</Link>
</Tab>
<Tab isActive={window.location.href.includes("price")}>
  <Link to="price">price</Link>
</Tab>
...

const Tab = styled.span<{ isActive: boolean }>`
	...
  color: ${({ isActive, theme }) =>
    isActive ? theme.accentColor : theme.textColor};
`;

🌕

React Router Dom 6 버전부터 추가된 useMatch 훅과
window.location.href.includes 는 엄연하게 다른 역할을 한다.

useMatch는 parameter로 집어넣은 url과 현재 url이 일치하면
관련 정보를 객체형태로 가져온다.

params: {coinId: 'btc-bitcoin'}
pathname: "/btc-bitcoin/chart"
pathnameBase: "/btc-bitcoin/chart"
pattern: {path: '/:coinId/chart', caseSensitive: false, end: true}

params, pathname, pathnameBase, pattern 의 속성을 가지고 있다.
만약 일치하지 않으면 null 값을 반환한다.

window.location.href 는 현재 페이지의 URL을 가져오는 속성이다.
문자열 형태로 반환하기 때문에 split이나 includes 같은 메소드로
원하는 형태로 가공하여 사용하는 방법.

일반적으로는 사용목적 자체가 다르기 때문에 서로를 대체하게 될 일이 없지만
위와 같이 "특정 URL에 접속해 있다면 이런 스타일을 적용해주세요~"
같은 코드를 짤 때는 비슷한 역할로 사용될 수 있다.

둘 중 어느 것이 더 효율적인지는 상황에 따라 전부 다르다.
하지만 결론적으로는 useMatch 훅을 사용하는 편이 대부분 안정적이고 성능적으로 우수하다.

window.location.href.includes() 는 현재 페이지의 URL 문자열에서
'특정 문자열을 검색하시오' 라는 로직이 포함되어 있다.
문자열 검색 로직은 문자열의 길이에 비례해서 선형적으로 시간복잡도가 증가한다.
쉽게 말해 문자열이 길어질수록 검색하는 시간이 늘어난다는 이야기.
게다가 window.. 로 시작하는 이 함수는 자바스크립트 엔진의 메인 스레드를 차지하게 되므로
검색시간이 길어지면 길어질수록 브라우저의 반응성이 떨어질 수 있다.

그에 반해 useMatch 훅은 React Router Dom 에서 자체 제공되는 라우팅 정보를 활용해
정보를 추출한다. 이 라우팅 정보는 이미 메모리에 캐싱되어 있기때문에 복잡한
검색로직이 필요없어 선형적으로 시간복잡도가 증가하는 문자열 검색에 비해
성능적으로 우수할 확률이 높다. 그리고 훅 자체에서 실제 경로 문자열과 입력한 문자열을
비교하여 일치 여부를 판단하게 되므로 보다 정확한 일치여부를 보장해준다.

⭐️

최근에 이 로직에 관해서 시간복잡도를 어떻게 측정할 수 있나요? 어떻게 개선할 수 있나요?
라는 질문을 받았다. 얼마나 효율적인 코드를 짤 수 있나요? 라는 질문 같아서
맨날 클린코드, 효율적인 코드 노래를 부르던게 부끄러워졌다.
결국에 아는만큼 보인다고 조금 더 공부를 하는 수 밖에 없을 것 같다.