React_게시글 목록에서 현재 게시글 스타일 표시하기

게시글 목록이 표시되는 페이지가 있다. 현재 내가 보고있는 게시글은 그 목록에서 그 게시글 제목에 특정 스타일을 부여해서 내가 지금 뭘 보고 있는지 파악하기 쉽게 하고 싶다. 이를 위해 NavLink를 한다.

import { NavLink, Outlet } from 'react-router-dom';

const Articles = () => {
  const activeStyle = {
    color: 'green',
    fontSize: 21,
  };

  return (
    <div>
      <Outlet />
      <ul>
        <li>
          <NavLink
            to='/articles/1'
            style={({ isActive }) => (isActive ? activeStyle : undefined)}
          >
            Article 1
          </NavLink>
        </li>
        <li>
          <NavLink
            to='/articles/2'
            style={({ isActive }) => (isActive ? activeStyle : undefined)}
          >
            Article 2
          </NavLink>
        </li>
        <li>
          <NavLink
            to='/articles/3'
            style={({ isActive }) => (isActive ? activeStyle : undefined)}
          >
            Article 3
          </NavLink>
        </li>
      </ul>
    </div>
  );
};

export default Articles;

 

 

이를 더 재사용성을 높여서 리팩토링하면 이렇다.

import { NavLink, Outlet } from 'react-router-dom';

// const Articles = () => {
//   const activeStyle = {
//     color: 'green',
//     fontSize: 21,
//   };

//   return (
//     <div>
//       <Outlet />
//       <ul>
//         <li>
//           <NavLink
//             to='/articles/1'
//             style={({ isActive }) => (isActive ? activeStyle : undefined)}
//           >
//             Article 1
//           </NavLink>
//         </li>
//         <li>
//           <NavLink
//             to='/articles/2'
//             style={({ isActive }) => (isActive ? activeStyle : undefined)}
//           >
//             Article 2
//           </NavLink>
//         </li>
//         <li>
//           <NavLink
//             to='/articles/3'
//             style={({ isActive }) => (isActive ? activeStyle : undefined)}
//           >
//             Article 3
//           </NavLink>
//         </li>
//       </ul>
//     </div>
//   );
// };

// Refactoring

const Articles = () => {
  return (
    <div>
      <Outlet />
      <ul>
        <ArticleItem id={1} />
        <ArticleItem id={2} />
        <ArticleItem id={3} />
      </ul>
    </div>
  );
};

const ArticleItem = ({ id }) => {
  const activeStyle = {
    color: 'green',
    fontSize: 21,
  };

  return (
    <li>
      <NavLink
        to={`/articles/${id}`}
        style={({ isActive }) => (isActive ? activeStyle : undefined)}
      >
        Article id: {id}
      </NavLink>
    </li>
  );
};

export default Articles;