Nav바 드롭다운 기능구현

이렇게 페이지 전체에 가로로 전체메뉴가 떨어지는 건 메가 드롭다운이라고 많이 부르는 듯 하다..

1. 첫 구상
   처음 이 nav바를 접했을 때는 굉장히 간단하게 생각했다.
   각 리스트에 맞는 메뉴바를 만들고, 해당하는 리스트에 호버했을 때 보여주면 되는 것 아닌가?
   아주 마음 편히 시작했다.

2. 첫 코딩
   여기서부터 고민이 시작되었다.
   각 리스트에 맞는 메뉴바를 만들면 이 친구들은 어디에 숨어있다가 나와야 하는가..
   긴 고심끝에 내린 결론은 모두 겹쳐있다가 호버가 됐을 때 해당하는 메뉴바만 보이게 하는 것이었다.

3. 문제점
   먼저 각각에 해당하는 메뉴바를 모두 만드는 것은 너무나도 비효율적이었다.
   몇 개가 될 지도 모르는 메뉴바를 일일이 하드코딩하기도 벅찼고 map으로 돌려야겠다고 생각했다.
   그래서 나온 문제의 무식한 방법...

function NavModalComponent({
  lt1,
  lt2,
  lt3,
  lc1,
  lc2,
  lc3,
  lc4,
  lc5,
  lc6,
  lc7,
  lc8,
  lc9,
  lc10,
  lc11,
  lc12,
  lc13,
  src,
  imgName,
  aSrc,
  id,
  menuNum,
  outMenuNum,
}) {
  const history = useHistory();
  const goToProducts = () => {
    history.push('/productdetail/');
  };
  return (
    id === menuNum && (
      <NavModalContainer>
        <NavModal onMouseLeave={outMenuNum}>
          <NavModalContent>
            <NavModalTitle width="30%">
              <NavModalList>
                <NavModalListTitle>{lt1}</NavModalListTitle>
                <NavModalListContent onClick={goToProducts}>
                  {lc1}
                </NavModalListContent>
                <NavModalListContent>{lc2}</NavModalListContent>
                <NavModalListContent>{lc3}</NavModalListContent>
                <NavModalListContent>{lc4}</NavModalListContent>
                <NavModalListContent>{lc5}</NavModalListContent>
              </NavModalList>
            </NavModalTitle>
            <NavModalTitle width="30%">
              <NavModalList>
                <NavModalListTitle>{lt2}</NavModalListTitle>
                <NavModalListContent>{lc6}</NavModalListContent>
                <NavModalListContent>{lc7}</NavModalListContent>
                <NavModalListContent>{lc8}</NavModalListContent>
                <NavModalListContent>{lc9}</NavModalListContent>
              </NavModalList>
              <NavModalList>
                <NavModalListTitle>{lt3}</NavModalListTitle>
                <NavModalListContent>{lc10}</NavModalListContent>
                <NavModalListContent>{lc11}</NavModalListContent>
                <NavModalListContent>{lc12}</NavModalListContent>
                <NavModalListContent>{lc13}</NavModalListContent>
              </NavModalList>
            </NavModalTitle>
            <NavModalTitle width="40%">
              <NavModalImage src={src}></NavModalImage>
              <NavModalImageName>{imgName}</NavModalImageName>
            </NavModalTitle>
          </NavModalContent>
        </NavModal>
      </NavModalContainer>
    )
  );
}

부모 컴포넌트에서 map으로 돌린 데이터들을 저만큼씩이나 받아와 메뉴리스트에 뿌리고 있는 것이다.
딱 봐도 굉장히 비효율적이고 무식한 방법이다..
렌더링 시에도 한 번 렌더링이 될 때마다 쓸 데없이 보이지도 않는 메뉴바를 다섯번씩이나 반복해서 보내주고 잇었다.
하지만 갈 길이 급했기에 일단 구현은 됐으니 넘어가자~ 라고 생각했던 것이 함정이었다.

연욱님의 피드백을 받고 다시 리팩토링 해보기로 한다.

4. 1차 리팩토링
   반복되는 부분이 너무 많다.
   그 부분을 줄이기 위해 한 번 더 map을 사용하기로 한다.
   하지만 여기서도 문제가 생긴다.
   각 리스트들의 제목들은 반복할 수 없고 컴포넌트가 너무 많이 생겨버린다..
5. 멘토님의 도움
   멘토님의 도움으로 처음부터 아예 다시 짜보기로 했다.
   일단 굳이 컴포넌트를 나눌 필요가 없었다.
   각 리스트에 해당하는 메뉴들로 상수데이터만 잘 짠다면 하나로 해결이 될 수 있는 문제였다.
   사실 간단한 mock데이터만 만들어봤지 제대로 생각해서 데이터를 짜 본적이 없어서 그런가 깊이 생각하지 못했던 부분이었다.

   {
       "id": 2,
       "lt1": "상의",
       "lc1": "반팔 티셔츠",
       "lc2": "긴팔 티셔츠",
       "lc3": "후드 티셔츠",
       "lc4": "맨투맨/스웨트 셔츠",
       "lc5": "셔츠/ 블라우스",
       "lt2": "하의",
       "lc6": "데님 팬츠",
       "lc7": "숏 팬츠",
       "lc8": "코튼 팬츠",
       "lc9": "기타 바지",
       "lt3": "액세서리",
       "lc10": "모자",
       "lc11": "가방",
       "lc12": "시계",
       "lc13": "안경",
       "src": "/images/image2.png",
       "imgName": "아이폰 12 프로 울트라 임팩트 범퍼 케이스"
     }

   이게 처음에 짰던 데이터 구조!

   const DATA = {
   제품: {
     productList: [
       {
         subTitle: '상의',
         list: [
           '반팔 티셔츠',
           '긴팔 티셔츠',
           '후드 티셔츠',
           '맨투맨/스웨트 셔츠',
           '셔츠/블라우스',
         ],
       },
       {
         subTitle: '하의',
         list: ['데님 팬츠', '숏 팬츠', '코튼 팬츠', '기타 바지'],
       },
       {
         subTitle: '액세서리',
         list: ['모자', '가방', '시계', '안경'],
       },
     ],
     imgdes: [
       {
         imgSrc: '/images/image1.png',
         des: '아이폰 12 프로 울트라 임팩트 범퍼 케이스',
       },
     ],
   }

   이게 리팩토링 후 다시 짠 데이터 구조!

처음 짤 때는 복잡하지만 저렇게 미리 내가 구현할 기능을 생각하며 만들어놓으니 훨씬 간단해졌다.
연욱님이 팁으로 주신
'객체를 배열로 만드는 방법'의 여러가지 종류를 통해 객체안의 배열, 배열안의 객체를 자유롭게 이용하니 훨씬 가독성이 좋은 코드가 만들어졌다.

이 nav바 하나도 제대로 구현해내는 것 만으로도 확실히 성장할 수 있다던 연욱님의 말이 아주 와닿았다.🙏