InfLearn 클론코딩 nav bar

나를 큰 좌절감에 빠지게한 네비게이션 코드리뷰!!

1. 작성한 코드
   
   

categoryBox 라는 큰 tag 안에
MainCategory, SubCategory, ThirdCategory
의 ul 태그를 만들고, 그 안에 받아온 데이터를 mapping 해서 화면에 출력합니다.

이과정에서 첫번째 depth에 마우스가 hover 되면
스테이트에 받아온 배열을 mapping하며, 그 안에 배열이 스테이트에 값으로 저장되고, 그 다음 두번째 depth에 hover가 되면 배열의 값이 인자로 들어온 배열을 thirdDepth 스테이트에 담아서 인자로 받은 배열을 다시 mapping하여 값을 출력하는 방식입니다.

이 문제를 처음 마주했을 때,
나는 하나의 map 안에서 데이터를 레이아웃에 맞게 전부 출력한다음 전부 display none 처리를 해서 조건부 랜더링을 사용 후 각id에 맞는 값에 hover가 되면 그 부분만 none이 풀리게 작성해야겠다고 생각했었다.
하지만 이방법을 구현도 못했을 뿐더러 했다고 하더라도 모든 데이터를 다 출력하기 때문에 기능저하를 일으킬게 분명했다. 하지만 이렇게 구현하겠다는 고집때문에 며칠을 날렸는지 모르겠다 .. 혼자 해결하기 위해 전전긍긍하던 도중 난 결국 방법을 바꾸는게 좋다고 생각을 했고, 이 과정에서 멘토님들의 도움을 받았었다. 그로인해 문제를 해결 할 수 있었고,
한 문제를 해결하기 위해 며칠 씩 고민 한 적은 처음이였기에
꽤나 잊지 못하는 코드가 될 것 같다.