카테고리별 Link 이동하기

내용

• url이 반복돼서 구조분해할당 하기
• 반복되지 않은 다른 url 조건문 선언

결과

• perfume
• best seller
• shop all

코드

backend에서 넘겨준 자료

<Link to="/">SHOP</Link>
{isShopHovered && (
  <ul className="shopCloseBox">
   {shopList.map((list, inde x) => {
     return (
      <li className="shopClose" key={index}>
       <Link
        to={
   //link가 categoryUrl일때 index를 붙이고 그렇지 않을때 원래link를 리턴
         list.link === categoryUrl
          ? `${categoryUrl}${index - 1}`
          : list.link
         }
       >
         {list.text}
        </Link>

// 같은 url 구조분해 할당
const categoryUrl = '/products?main-category=';
const baseUrl = '/products?';

const shopList = [
  {
    link: baseUrl,
    text: 'SHOP ALL',
  },
  {
    link: `${baseUrl}best-seller=4`,
    text: 'BEST SELLER',
  },
  {
    link: categoryUrl,
    text: 'PERFUME',
  },
  {
    link: categoryUrl,
    text: 'BODY CARE',
  },
  {
    link: categoryUrl,
    text: 'HAND CARE',
  },
  {
    link: categoryUrl,
    text: 'LIP CARE',
  },
  {
    link: categoryUrl,
    text: 'HOME OBJECTS',
  },
  {
    link: categoryUrl,
    text: 'GIFT SET',
  },
  {
    link: categoryUrl,
    text: 'ACC',
  },
];