[TIL/React] 22.10.01 네비게이션 스타일

Link & NavLink

Link

React에서는 브라우저의 주소를 변경하기 위해 <a> 태그 대신 <Link> 컴포넌트를 사용한다. 이 때, <Link> 컴포넌트는 HTML5 History API를 사용하기 때문에 컴포넌트들을 새로 불러오는 것 없이 브라우저의 주소만 변경한다.

content를 클릭하면 to props에 할당된 주소로 브라우저를 이동시킵니다.

예시

const App = () => {
  // ...
  
  return (
    <Link to="/home"> // 클릭 시 /home으로 이동
      To Home // content
    </Link>
  )
}

NavLink

NavLink는 Link와 사용법은 동일하다. 다만, 특정 브라우저로 이동했을 때, 해당 주소를 관리하는 <Link> 컴포넌트에 스타일을 부여할 수 있도록 한다. 자체적으로 isActive라는 boolean 값을 갖고 있고, 해당 주소에 도달 했을 때 isActive는 true가 된다.

해당 속성은 다음과 같이 사용할 수 있다.

예시

const App = () => {
  // ...
  
  return (
    // 현재 Link 주소에 위치해 있으면 style의 fontWeight를 600으로 변경
    <NavLink to="/home" style={({isActive}) => isActive && {fontWeight: 600}}>
      To Home
    </NavLink>
  )
}

이런 식으로 isActive 값에 따라 삼항 연산자, && 연산자, || 연산자 등을 활용하여 다양한 스타일을 제공할 수 있다.

useMatch

현재 위치한 브라우저의 주소에 따라 Link 컴포넌트에 스타일을 부여하기 위해 여러가지 방법을 시도해보았다. 가장 먼저 NavLink의 isActive를 사용해보았는데, 주소에 파라미터를 사용할 수 없어 브라우저에서 세부 카테고리로 이동하는 경우 isActive가 false가 되었다.

그래서 react-router-dom 라이브러리에서 제공하는 useMatch() 훅 함수를 사용하여 match 객체를 만들고, 현재 위치와 useMatch() 함수의 매개변수로 전달된 값이 일치한다면 true를 반환하도록 했다. 이 때 매개변수로는 파라미터를 사용할 수 있기 때문에 원하는 결과를 얻을 수 있었다.

const App = () => {
  const shopMatch = useMatch('/shop/:category');
  
  reutn (
    <CustomNavLink to="/" clicked={shopMatch}>
      To Shop
    </CustomNavLink>
  )
}