[React] 카테고리 만들기

이번 프로젝트에서 카테고리는 지역이기때문에 변경사항이 적을것이라고 판단하여 상수데이터를 기반으로 구현하였다.
상수데이터 속 한 요소의 형태는 다음과 같다.

const CATEGORIES = [
  {
    id: 1,
    name: "서울",
    subcategories: [
      	{ subCategoryId: 1, name: "서초/신사/방배" },
      	{ subCategoryId: 2, name: "잠실/방이" },
      	{ subCategoryId: 3, name: "강남/역삼/삼성/논현" },
      	{ subCategoryId: 4, name: "잠실새내/신천" },
      	{ subCategoryId: 5, name: "영등포/여의도" },
      	{ subCategoryId: 6, name: "구로/금천/오류/신도림" },
      	{ subCategoryId: 7, name: "강서/화곡/까치산역/목동" },
      	{ subCategoryId: 8, name: "천호/길동/둔촌" },
      	{ subCategoryId: 9, name: "서울대/신림/사당/동작" },
      	{ subCategoryId: 10, name: "종로/대학로" },
      	{ subCategoryId: 11, name: "용산/중구/명동/이태원" },
      	{ subCategoryId: 12, name: "성신여대/성북/월곡" },
      	{ subCategoryId: 13, name: "노원/도봉/창동" },
      	{ subCategoryId: 14, name: "강북/수유/미아" },
      	{ subCategoryId: 15, name: "왕십리/성수/금호" },
      ],
  	},
  .
  .
  .
  ]

먼저 상위 요소에 해당하는 카테고리를 map을 사용해 구현한 후 MouseEnter 이벤트가 발생하면 이벤트가 발생한 요소의 id를 state에 저장한 후 그 state와 CATEGORIES 요소가 갖고있는 subCategories 배열을 변수에 저장하고, 다시 그 배열을 map을 사용해 출력해주도록 구현하였고, MouseLeave 이벤트를 통해 마우스가 카테고리를 벗어나면 카테고리가 unmount 되도록 구현하였다.
그리고 useNavigate훅을 사용해 서브카테고리를 클릭하면 해당 카테고리의 주소로 이동하도록 설정했다.

const subCategories = CATEGORIES.find(
    category => category.id === currentCity
  ).subcategories;

<S.CategoryBox
      onMouseLeave={closeCategory}
      categoryAnimation={categoryAnimation}
    >
      <S.Cities>
        {CATEGORIES.map(city => {
          return (
            <S.Category
              key={city.id}
              onMouseEnter={() => setCurrentCity(city.id)}
              color={currentCity === city.id ? "#F7323F" : "black"}
            >
              <span>{city.name}</span>
              {currentCity === city.id && (
                <span>
                  <HiOutlineChevronRight />
                </span>
              )}
            </S.Category>
          );
        })}
      </S.Cities>
      <S.SubCategories>
        {subCategories.map(subCategory => {
          return (
            <S.Category
              key={subCategory.subCategoryId}
              color={
                parseInt(params.id) === subCategory.subCategoryId
                  ? "#F7323F"
                  : "black"
              }
              onClick={() => moveToCategory(subCategory.subCategoryId)}
            >
              {subCategory.name}
            </S.Category>
          );
        })}
      </S.SubCategories>
    </S.CategoryBox>