[프로젝트] 기억에 남는 코드_ multi level dropdown(React)

▪️ 구현결과👀

프로젝트기간동안 제일 나의 발목을 잡았던 부분 아.오 🔥

구현과정

1. Mock데이터 만들어두기

• BE에서 데이터를 불러와 카테고리 이름이 들어갈것을 대비
  • 객체 요소가 들어있는 배열형태의 Mock data
    

2. Map 메서드를 중첩해서 사용

• Map함수안에 Map함수를 씀으로써 관련된 데이터만 불러올 수 있다.

---

▪️ 오래걸린이유..🥲

처음에 멘토님께 Map 함수를 중첩해서 쓰면 관련된 카테고리만 나온다는 조언을 듣고 오?! 그런방법이?! 하고 신나서 코딩을 쳤다. 그런데 생각보다 호락호락하지 않았다.
처음에 이런식으로 코드를 쳤는데 예상치 못한 상황..
데이터만 map이 적용되는것이아니고, 데이터를 감싸고있는 ul / div태그와 해당되는 CSS가 모두 map돌아가는것이다.
나도 돌아가실뻔 ^^

코드:

결과:

---

▪️ 해결코드 🥳

포인트1.
한곳에서 map을 한번에 다돌리는 것은 맞지만 CSS 와 감싸고있는 태그 상황을 생각해서 감싸고있는 태그 안에서 map 돌리기

포인트2.
map을 돌릴때마다 관련된 데이터만 나오게 하기위해 id값을 계속 비교해준다.

코드(JSX부분) / 설명:

//menuList는 객체상태의 요소가 들어있는 배열형태의 data (위 Mock data참고)
return (
// 전체 dropdown을 감싸고있는 div
  <div className="dropdown">        
// 첫번째 카테고리 부분 시작
    <div className="dropdownMainWrap" >       
      <ul className="dropdownFirstUl">
        {menuList.map(({ cate, mainmenu }) => {
          return (
            <FirstSec
              key={cate}
              id={cate}
              data={mainmenu}
// 아래 onEnter props로 함수를 전달하고 currentId값을 가져옴
              onEnter={() => setCurrentID(cate)}
            />
          );
        })}
      </ul>
    </div>
// 두번째 카테고리 부분 시작
    <div className="dropdownSecondWrap">
      <ul className="dropdownSecondUl">
//1차map 
        {menuList.map(({ cate, subcategory }) => {
          return (
//map 함수니까 key값을주고
            <div key={cate}>
//2차map
//관련된 data만 나와야하니까 현재 id(cate)와 위에서 onEnter으로 가져온 curentId 값을 비교해서 같을때만 2차 카테고리 나올수 있게 설정
              {cate === currentId &&
                subcategory.map(({ cate, name }) => {
                  return (
                    <FirstSec
                      key={cate}
                      id={cate}
                      data={name}
                      setId={setId}
// 2차 카테고리의 id값을 따로 빼주기위해 이번엔 다른 state로 저장(openCategory라는 다른이름의 state)
                      onEnter={() => setOpenCategory(cate)}
                    />
                  );
                })}
            </div>
          );
        })}
      </ul>
    </div>
// 세번째 카테고리 부분 시작
//1차map 
    {menuList.map(secondCat => {
      return (
//map 함수니까 key값을주고
        <div key={secondCat.cate}>
//2차 map
          {secondCat.subcategory.map(thirdCat => {
            return (
//map 함수니까 key값을 또 주고
              <div key={thirdCat.cate}>
// 세번째 카테고리에서는 첫번째 카테고리의 id와 두번째카테고리와의 id(cate)값이 모두 연결되어있어야 하기 때문에 삼항연산자의 조건을 두개 주어야한다. 
// * currentID -> 첫번째 카테고리 onEnter에서 가져온 id(cate)값
// * openCategory -> 두번째 카테고리 onEnter에서 가져온 id(cate)값
// * secondCat.cate -> 세번째 카테고리의 위의 1차 map에서 가져온 id(cate) 값
// * thirdCat.cate -> 세번째 카테고리의 위의 2차 map에서 가져온 id(cate) 값
                {currentId === secondCat.cate &&
                  openCategory === thirdCat.cate && (
                    <div className="dropdownThirdWrap">
                      <ul className="dropdownThirdUl">
// 3차 map 돌리기
                        {thirdCat.category.map(({ cate, name }) => {
                          return (
                            <FirstSec
                              key={cate}
                              data={name}
                              setId={setId}
                              id={cate}
                            />
                          );
                        })}
                      </ul>
                    </div>
                  )}
              </div>
            );
          })}
        </div>
      );
    })}
  </div>
);

---

나이거 절대 안까먹을거야..........🤯