NavLink를 사용해보자

문제

원하는 카테고리를 클릭 했을 때 선택 된 카테고리에 CSS를 줘야한다.

기존 코드

Nav.js

<div className="navBottom">
  <ul className="categoryList">
    {CATEGORIES.map((CATEGORY, i) => (
      <Category category={CATEGORY} key={i} />
    ))}
  </ul>
</div>

• 카테고리의 url과 title이 있는 CATEGORIES라는 상수 데이터를 받아서 Category 컴포넌트에 category라는 props로 전달을 했다.

Category.js

import React from 'react';

const Category = ({ category }) => {
  return (
    <li>
      <Link to={category.url}>
        {category.title}
      </Link>
    </li>
  );
};

export default Category;

• 전달받은 props를 원하는 곳에 배치를 했다.
• 카테고리(title)를 누르면 설정해놓은 url로 이동하게 했다.
• 그리고 문제를 해결하기 위해 어떤 방법을 써야하나 고민하다 처음 보는 기능이 있어서 적용을 해보기로 했다.
  
  

해결

Category.js

import React from 'react';
import { NavLink } from 'react-router-dom';

const Category = ({ category }) => {
  return (
    <li>
      <NavLink
        to={category.url}
        className={({ isActive }) =>
          isActive ? 'categoryActive' : 'categoryTitle'
        }
      >
        {category.title}
      </NavLink>
    </li>
  );
};

export default Category;

• 어떤 방법이 있나 찾아보다 NavLink를 알게 되었고 사용해봤다.
• NavLink를 사용 시 isActive라는 props를 받는데 콜백함수로 className을 조건부 렌더링을 할 수 있다.