18. 서브메뉴 hover effect

1. 서브메뉴 생성

• 메뉴에 마우스를 호버하면 서브메뉴가 나오고, 밑줄이 가운데에서 밖으로 나가는 애니메이션을 추가했다.

• 서브메뉴는 앞의 두 개의 메인메뉴에서만 적용될 예정이어서, 해당 서브메뉴의 이름들을 constants/data.ts 의 menuData에 list 형태로 저장한 후, map을 사용해서 구현했다.

• Type '{title: string; href: string;}' is not assignable to type 'ReactNode' :
  🟥 서브메뉴에서 el.title을 불러와야 하는데 el만을 불러왔을 때, 나왔던 에러.

2. 서브메뉴 로직 리팩터링

• 앞의 두 서브메뉴만 hover했을 때 나타나게 해야했다 : 단순하게 아래와 같이 우선 작성한 다음,

//Menubar.tsx

{idx === 0 && subMenu[0].list.map((el, i) => <div key={i}>{el.title}</div>)}
{idx === 1 && subMenu[1].list.map((el, i) => <div key={i}>{el.title}</div>)} 

• subMenu를 data.ts 파일에 입력하면, Menubar 컴포넌트에서 subMenuIdx가 담긴 배열을 받아서 다음과 같이 반복 없이 구현하도록 하였다.

//Menubar.tsx
const subMenuIdx = Array.from(Array(subMenu.length),(_,i)=>i);

return (
	<>
    	.
        .
        .
        {subMenuIdx.map((i) => idx === i && subMenu[i].list
        .map((menu, key) => 
        (<div key={key}>{menu.title}</div>)
        ))}
	</>
)