React Router - (3. 활성화 페이지 효과 표시)

보통의 웹 페이지에서는 사용자 경험(UX)을 향상시키기 위해 현재 활성화된 페이지에 네비게이션 메뉴의 시각적 효과를 준다. 이는 사용자가 웹 사이트를 더 편리하게 탐색하고, 어떤 페이지에 위치해 있는지 더 잘 이해할 수 있도록 도와준다. 이러한 기능은 react router에서 제공하는 훅으로 쉽게 구현할 수 있다.

useResolvedPath()

useResolvedPath() 훅은 주어진 경로에 대한 해결된 경로 정보를 가져오는 데 사용된다. 매개변수로 path의 정보인 to 값을 넣어주면 URL 생성 및 경로 해석을 위한 유용한 정보를 제공한다. resolved 변수에는 다음과 같은 속성들이 포함된다.

// 기본 호출
const { pathname, search, hash } = useResolvedPath(to);		// to 에는 정적 혹은 동적인 경로를 매개변수로 대입한다. 그 후 pathname 값에 경로 값이 문자열로 추출된다.

• pathname - 해당 경로의 이름 (URL 경로)
• search - 해당 경로의 쿼리 문자열
• hash - 해당 경로의 해시 값

이를 통해 동적인 URL을 다룰 때 편리하게 최종 경로를 가져올 수 있다.

useMatch()

useMatch 훅은 현재 URL이 특정 경로와 일치하는지 확인하는 데 사용된다. 매개변수에는 객체가 들어가며 path 속성엔 검사할 경로를, end 속성엔 경로의 끝 부분만 검사할지 여부를 지정한다. 리턴값으로 현재 컴포넌트가 페이지 경로와 일치하는지 여부의 boolean 값을 반환한다.

// path에는 useResolvedPath() 훅에서 추출한 pathname을 넣어주면 된다. 
const match = useMatch({ path: pathname, end: true });			

• path - 비교할 경로 패턴
• end - (선택사항) 경로 패턴의 끝 부분만 검사할지 여부, default는 false

지금까지 이 두개의 훅들을 조합하여 활성화 페이지 효과를 완성해보자.

const PageLink: FC<Props> = ({ to, className: _className, ...props }) => {

    const { pathname, search, hash } = useResolvedPath(to);
    const match = useMatch({ path: pathname, end: true });
	
  	// 만약 현재 컴포넌트가 현재 경로와 일치하면, 조건부로 활성화 효과의 tailwind css 속성을 넣어준다.
    const className = [_className, match && 'btn-active'].join(' ');

    return (
        <Link
            {...props}
            className={className}
            to={to}
        />
    );
};

결과

1. 홈페이지일 때
   

2. 게시판 페이지일 때