useMatch

1. 원하는 기능

위와 같이 조건에 따라 각자 다른 페이지에서 다른 헤더를 보여주게 합니다.

2. 사용한 기술

useMatch

 

필요한 패스를 변수로 선언한다.

 const prId = useMatch("pr/:_id");
 const prIdEdit = useMatch("pr/:_id/edit");

그리고 하나의 변수로 이를 묶는다.

const headerMatch =
    prId ||
    prIdEdit ||

패스를 할당 받은 변수를 if문으로 조건을 준다.

  if (headerMatch) {
    return (
      <header className="relative w-full h-[60px] flex items-center justify-center border-b border-gray-200 mb-5">
        <img
          src="/icons/back.svg"
          className="absolute left-0 w-6 h-6 hover:cursor-pointer"
        />
        <div className="w-full text-center text-[24px] font-bold">제목</div>
      </header>
    );
  }

그러면 저 조건에 맞은 페이지는 위의 헤더를 보여줄 것이고, 그게 아니라면 다른 헤더를 보여준다.

해결 방법
1. useMatch(패스)를 사용한다.
  const prId = useMatch("pr/:_id");

2. 이 변수를 묶는 또 다른 변수를 생성
  const headerMatch =
    prId ||

3. if문 혹은 다른 조건문을 이용하여 조건을 설정
  if (headerMatch) {
    return (

위와 같이 조건부 렌더링이 필요한 경로를 변수로 설정하고, 그 변수를 이용하여 조건부 렌더링을 할 수 있다. 이 방식을 이용하면 헤더뿐만 아니라, Footer나 다른 페이지별로 다르게 보여야 하는 컴포넌트에도 동일한 조건부 렌더링 로직을 적용할 수 있다. 또한, 이러한 경로 매칭 로직을 유틸리티 함수로 분리하면 재사용성과 유지보수성이 더욱 높아진다.

이 방법 외에도 useLocation과 startsWith를 사용하여 경로 접두사를 기준으로 조건부 렌더링을 처리할 수 있다. 다만, startsWith는 고정된 문자열만 처리할 수 있기 때문에, 동적 경로나 숫자가 포함된 경로(/pr/123 등)는 제대로 처리하지 못할 가능성이 있다. 그래서 이 방법을 보완할 수 있는게, 정규 표현식을 사용하여, 위와 같은 /pr/123 같은 숫자가 포함된 경로를 처리하는 것이다. 정규표현식을 사용하는 방법도 있다. 이 방법은 복잡해질 수 있지만, 동적 경로나 다양한 패턴을 매칭할 때 매우 유용하다.

프로젝트에 따라서 정규식과 useLocation을 조합하거나, React Router의 useMatch를 활용하는 것이 더 적합할 수 있다.